多个级别的高度 100%

Question

为了解释我在寻找什么，我制作了一个 jsfiddle 来说明它。这意味着我有一个解决方案，但这不是代码审查问题。我已经查看了自己的代码，发现我不喜欢它。因此，它仅用于说明目的，以显示我想要用更好的解决方案替换的内容。这个包含太多的嵌套 div 和一些 JS/jQuery；如果可能的话，我更喜欢纯 CSS 解决方案。

基本点是：

1) body/main wrapper 的高度应始终为100%，即使视口大小已更改（调整小提琴窗口的大小以查看会发生什么）

2) 边界在div#content内的两个div，即#nav和#article，高度也应该是100%（与padding/margin /border-spacing)

3) 无论文字多么少，#nav 内灰色区域的高度都应始终为 100%（同样还有一些 margin/padding） /它包含的其他东西。如果内容不适合屏幕，则应出现垂直滚动条，并且背景颜色应向下延伸到可滚动区域内的内容，并具有与以前相同的边距/填充。

4) 右侧区域的绿色图像高度也应为100%，并且图像的大小应调整到容器的高度（最大为全尺寸的图像；之后它下面应该有空白空间，但#nav 和#article 的底部边框仍应在屏幕底部水平同步）。

有什么想法（最好不加载其他框架，如引导程序或使用 CSS flex 或其他支持不佳的技术）？

这是jsfiddle

代码是：

HTML

<div id="wrapper-block">
    <div id="wrapper">
        <div id="header">
           Banner and stuff
        </div>
        <div id="content">
        <div id="nav">
            <div id="inner-nav">
                <div id="v">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ullamcorper bibendum tortor, a euismod diam laoreet sed. Nunc massa augue, aliquam convallis erat id, rhoncus placerat lacus. Nullam tincidunt vulputate lacus, sit amet ullamcorper tellus egestas vel. Duis tincidunt faucibus erat et eleifend. In hac habitasse platea dictumst. In varius tincidunt augue ut ullamcorper. Quisque vestibulum sit amet orci in ullamcorper. Integer at erat et diam lacinia volutpat vitae sed purus. Ut rutrum erat nunc, a adipiscing purus bibendum ac.</div>
                </div>
            </div>
            <div id="article">
                <div id="inner-art">
                    <img id="pic" src="http://i58.tinypic.com/30ijbc3.jpg" />
                </div>
            </div>
        </div>
    </div>
</div>

CSS

* {
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    outline: 0;
}
html,body,caption,div,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,li,ol,ul,p,table,tr,th,td {
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
}
body.js {
    overflow: hidden;
}
#wrapper-block {
    max-width: 842px;
    margin: 0 auto;
    width: 100%;
}
#wrapper {
    background-color: #FFFFFF;
    width: 100%;
    box-shadow: 0 0.0625em 0.375em 0.0625em #777777;
    padding: 0 0.5em 0.5em;
    display: table;
    border-collapse: separate;
    border-spacing: 1em;
    padding: 0;
}
#content {
    display: table-row;
    border-spacing: 0;
    width: 100%;
}
#nav {
    width: 36%;
    height: 100%;
    float: left;
    margin: 0;
}
#wrapper-block, #wrapper, #content {
    height: 100%;
}
.js #wrapper {
    visibility: hidden;
}
#nav {
    border: 1px solid #000000;
    overflow: auto;
    font-size: 0.8125em;
    margin-bottom: -1px;
}
#article {
    width: 62%;
    height: 100%;
    float: right;
    border: 1px solid #000000;
    background-color: #FFFFFF;
}
#inner-nav {
    border: 1em solid #FFFFFF;
    height: 100%;
    background-color: #E6E6DC;
}
#v {
    background-color: #E6E6DC;
    margin-bottom: 1em;
    padding: 0.75em;
}
#inner-art {
    padding: 0.75em;
    height: 100%;
}
#pic {
    max-height: 100%;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

JS/jQuery

var cont = $('#content').height(),
    wrap = $('#wrapper').height(),
    win = $(window).height(),
    head = $('#header').height(),
    twoems = (wrap - head - cont);

$('#nav, #article').height(win - twoems - head - 2);

$('#wrapper').css('visibility','visible');

$(window).resize(function() {
    var newWin = $(window).height();
        if($('#wrapper').height() > newWin) {
            $('#nav, #article').height(newWin - twoems - head);
        } else {
            $('#nav, #article').height($('#content').height()-2);
        }
});

Answer 1

根据 OP 的 comment:

不需要支持 IE8-

因此，作为纯 CSS 解决方案，您可以使用 calc() 表达式来正确计算和指定元素的 height。

你需要做的是：

1. 在#header 上指定显式height
2. 使用 CSS calc() 函数计算 #content 元素的 height。

你最终会得到：

EXAMPLE HERE

#header {
    height: 2.5em;
}

#content {
    width: 100%;
    height: calc(100% - 2.5em);
}

您可能还想考虑使用 -webkit- 和 -moz- 前缀 to support 旧版本的基于 Webkit 的网络浏览器和 Mozilla Firefox。

值得注意的是calc()is supported in IE9+。

---

^{PS：我已经改进了 HTML 结构和一些 CSS 声明以去除多余的东西。此处无需使用 CSS 表格。}