Menu
I'm sorry if this was already answered, but it's kind of difficult to search for something with "100% height".
My problem is that I need 100% height table layout because of automatic cell resizing done by browser, which I don't want to script myself for obvious reasons.
It differs from other "100% problems", in that I need some cells to stick on the top and some on the bottom, and have the middle resized by browser to fill remaining space.
That sort of works, the problem happens when I need that middle part to contain overflowing stuff, and obviously I want overflow:auto there to enable user thru that stuff. It works in WebKit, in Firefox, it doesn't, others not tested. Here's the test case.
<html>
<head>
<style>
body, html {
height: 100%;
margin: 0;
padding: 0;
}
table {
height: 100%;
width: 200px;
border: 0;
}
.fill {
background-color: red;
}
.cont {
overflow: auto;
height: 100%;
}
</style>
</head>
<body>
<table>
<tr>
<td style="height:50px"></td>
</tr>
<tr>
<td style="height:100px"></td>
</tr>
<tr>
<td class="fill">
<div class="cont">
An opaque handle to a native JavaScript object. A JavaScriptObject cannot be created directly. JavaScriptObject should be declared as the return type of a JSNI method that returns native (non-Java) objects. A JavaScriptObject passed back into JSNI from Java becomes the original object, and can be accessed in JavaScript as expected
</div>
</td>
</tr>
<tr>
<td style="height:100px"></td>
</tr>
</table>
</body>
321
If you want to have a content cell scroll correctly vertically, when the content of a cell exceeds the height of the table, like cell 2 in the following screen dump: Then you can use a “relative” positioned div inside the table-cell and in the relative positioned div a absolute positioned div.
Use inner div's with position relative and absolute, to fix cell height, making it overflow correctly. --> <div style="position:relative; height: 100%"> <div style="overflow-y: scroll; position: absolute; top: 0; right:0; bottom: 0; left: 0;"> it works in chrome. Please give me a solution for F*****g IE8 above
Inner div which makes the inner table scrollable. The thead table row is absolutely positioned to make it stay on top of the body, same is done with the footer. Because the inner div is overflow: auto and a height defined the rest of the table rows fall inline in the scollable area.
But the tbody of the outer table contains only one row, one column and in it it has another table. This column has a height defined and overflow: auto so the able in it (which only has the content) will be scrolled inside it.
I just answered a question like this today and i believe you're looking for the same thing, here is the question itself and my answer:
HTML
<div class="container">
<div class="twenty">
fixed height 20
</div>
<div class="fifty">
fixed height 50
</div>
<div class="hundred">
fixed height 100
</div>
<div class="auto">
<div class="content">
....
</div>
</div>
<div class="fifty" style="border-bottom:none; border-top:1px solid">
fixed height 50
</div>
</div>
CSS
html,body {
height:100%;
margin:0;
padding:0;
overflow:hidden;
}
.container {
width:100%;
height:100%;
}
.twenty, .fifty, .hundred, .auto {
border-bottom:1px solid black;
}
.twenty {
height:20px;
}
.fifty {
height:50px;
}
.hundred {
height:100px;
}
.auto {
height:100%;
overflow:hidden;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
margin:-120px 0;
padding:120px 0;
}
.content {
float:left;
overflow:auto;
height:100%;
}
.content{
width:100%;
}
Full view: http://jsfiddle.net/8abeU/show/ Fiddle: http://jsfiddle.net/8abeU
187
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
