高度100%在几个级别

为了解释我在寻找什么，我做了一个简单的例子来说明它。这意味着我有一个解决方案，但这不是一个代码审查问题。我已经审查了我自己的代码，发现我不喜欢它。这里只是为了说明，我想用更好的解来代替什么。这一个包含太多嵌套的div的我的口味，和一些JS/jQuery;如果可能的话，我更喜欢纯CSS解决方案。

基本要点是:

1) body/main wrapper应该始终具有高度100%，即使视口大小被改变(调整窗口的大小，看看会发生什么)

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

3) #nav内的灰色区域的高度应该始终是100%(再次与一些margin/padding根据fiddle)，无论它包含多少文本/其他东西。如果内容不适合屏幕，应该出现一个垂直的滚动条，背景颜色应该向下延伸到可滚动区域内的内容，并使用与以前相同的边距/填充。

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

有什么想法吗(最好不要加载额外的框架，比如bootstrap或使用CSS flex或其他支持不好的技术)?

这里是 jsfield

代码是:

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);
        }
});

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