HTML Layout with height 100% height

I need help with a certain problem. Basically, I need a div with a table inside it with divs in the cells etc. Also, I need the most outer div to have 100% height and width (cover the whole page) and the descendants to calculate their height accodringly, except for those divs whose content height is greater than theirs (they should show a scrollbar)

I've prepared a fiddle with a test page:

http://jsfiddle.net/S2YSh/6/

So far, only Google Chrome shows it as I plan, IE doesn't calculate paddings and margins in the height 100% and Firefox stretches with the content (no scrollbar)

If anyone can help me (preferably with the same HTML structure) it will be greatlu appreciated.

---

You can do it like this:

.right{
    float:right;
    width:200px;
    height:100%;
    background:red;
}
.left{
    overflow:hidden;
    background:green;
    height:100%;
}
.right, .left{
padding:20px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

html, body{
    height:100%;
}

Check this http://jsfiddle.net/S2YSh/9/

---

尝试这个：

<div style="height:100%;width:100%;position:absolute;top:0;left:0;">
  <table>...</table>
</div>

链接地址: http://www.djcxy.com/p/88260.html

上一篇: Twitter Bootstrap：100％高度的容器中的div

下一篇: HTML布局，高度100％