For example, I have an element-container with dimensions width: 100%; and height: 100%; and overflow: auto;
When I adding inside it more elements, so those becomes too big for container, it increases own area to fit those, instead of showing scrolls.
Is there any solution for this?
Example:
<html style = 'height: 100%;'>
<head>
<title>test scrolls</title>
</head>
<body style = 'height: 100%;'>
<table border = '1' style = 'width: 100%; height: 100%;'>
<tr><td id = "test_td" height = '50%' style = 'overflow: scroll;'></td></tr>
<tr><td height = '50%'><input type = "button" value = "add a lto of junk in first td" onclick = "document.getElementById('test_td').innerHTML = 'asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />'" /></td></tr>
</table>
</body>
</html>
Ok, another example with div:
<html style = 'height: 100%;'>
<head>
<title>test scrolls</title>
</head>
<body style = 'height: 100%;'>
<table border = '1' style = 'width: 100%; height: 100%;'>
<tr><td height = '50%'><div id = "test_div" style = 'width: 100%; height: 100%; overflow: scroll;'></div></td></tr>
<tr><td height = '50%'><input type = "button" value = "add a lot of junk in div in first td" onclick = "document.getElementById('test_div').innerHTML = 'asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />'" /></td></tr>
</table>
</body>
</html>
This is what you are looking for
TD's can not scroll, but you can have a div inside that does scroll.
http://jsfiddle.net/b9kzbf8c/1/
div.scrollable {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: auto;
}
<table border = '1' style = 'width: 100%; height: 100%;'>
<tr style="height: 40px; overflow-y: scroll;">
<td>
<div class=scrollable>Some content with a scrollbar if it's too big for the cell
Some content with a scrollbar if it's too big for the cell
Some content with a scrollbar if it's too big for the cell
</div>
</td>
<table>
EDIT
I have done it with jQuery too
http://jsfiddle.net/pwcd9cxe/2/
<script type="text/javascript">
var equalHeights;
resize = function(me){
equalHeights = me;
$('.td').height(($(equalHeights).height())/2);
};
$(window).resize(function(){
$('.td').height(($(equalHeights).height())/2);
});
resize($(window));
</script>
<style>
.td {overflow-y: scroll;}
</style>
<div class="td">
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
</div>
</div>
<div class="tr">
<div class="td">
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
Some content here that is copy pasted to fill up space. <br />
</div>
EDIT
I have managed to do it without any JS.