html - Scrolling Cell in a 100% height TABLE -

I'm sorry if it has already been answered, but finding something with "100% height" is difficult.

My problem is that due to automatic resizing of the browser, I need a 100% height table layout, which I do not want to script myself for obvious reasons.

It is different from other "100% Problems", where I need some cells that stick to the top and some below, and the browser resizes to fill the remaining space.

This work, the problem occurs when I need to include overflow stuff in the middle part, and obviously I want to overflow: To enable the user through the content itself, It works in Firefox in WebKit, is not it, others have not been tested here is the test case.

  & lt; Html & gt; & Lt; Top & gt; & Lt; Style & gt; Body, html {height: 100%; Margin: 0; Padding: 0; } Table {height: 100%; Width: 200px; Border: 0; } .Then {background color: red; } .cont {overflow: auto; Height: 100%; } & Lt; / Style & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Table & gt; & Lt; TR & gt; & Lt; Td style = "height: 50px" & gt; & Lt; / Td> & Lt; / TR & gt; & Lt; TR & gt; & Lt; Td style = "height: 100px" & gt; & Lt; / Td> & Lt; / TR & gt; & Lt; TR & gt; & Lt; Td class = "fill" & gt; & Lt; Div class = "cont" & gt; Opaque handles for the original javascript object. JavaScriptObject can not be created directly. JavaScript Object should be declared as the return type of the JSNI method which returns returns to the original (non-Java) objects. A JavaScriptObject, went back to Java from JSNI, became the original object, and can be entered in JavaScript according to expected & lt; / Div & gt; & Lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; Td style = "height: 100px" & gt; & Lt; / Td> & Lt; / TR & gt; & Lt; / Table & gt; & Lt; / Body & gt;  

I just answered a question like this and I believe that you are looking for the same thing, this is the question and my answer is:

HTML

  & lt; Div class = "container" & gt; & Lt; Div class = "twenty" & gt; Fixed height 20 & lt; / Div & gt; & Lt; Div class = "fifty" & gt; Fixed height 50 & lt; / Div & gt; & Lt; Div square = "hundred" & gt; Fixed height 100 & lt; / Div & gt; & Lt; Div class = "auto" & gt; & Lt; Div class = "content" & gt; .... & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div square = "fifty" style = "border-bottom: none; border-top: 1px solid" & gt; Fixed height 50 & lt; / Div & gt; & Lt; / Div & gt;  

CSS

  html, body {height: 100%; Margin: 0; Padding: 0; Hidden flurry; }. Container {width: 100%; Height: 100%; } .twenty, .fifty, .hundred, .auto {border below: 1px solid black; } .twenty {height: 20px; } .fifty {height: 50px; }. Hundred (height: 100px;} .o {height: 100%; hidden spill; -webkit-box size: border box; -moz box-size: border box; ms box-size: border box; box-size: border Box; margin: -120px 0; padding: 120px 0;} .content {float: left; overflow: auto; height: 100%;}. Content {width: 100%;}  

---

Full view: Bella: