2列html页面布局

我试图创建一个页面布局，基本上是一个左侧导航和一个右侧数据面板。这两者都有页眉、内容和页脚。内容是可滚动的。我的html是

<div id="container">
    <div id="nav" ><header id='header'>NAV HEADER</header><div class="content-nav"></div><footer id='footer'>NAV FOOTER</footer></div>
    <div id="disp"><header id='header'>DATA HEADER</header><div class="content-data"></div></div>
</div>

导航头和导航脚
数据头

外部div容器是相对位置的&nav和disp都是绝对位置的。

我希望每个页面的可滚动内容占据页眉和页脚之间的全部空间。正如在JSFIDLE中所看到的，当内容设置为高度时：100%的内容通过标题高度流出外部容器，因此即使滚动到底部，也不会看到所有内容？我可以使用calc（100%人头重量），但看起来并不优雅

有没有比使用定位更好的策略？也许是屈体拳

谢谢

把你的身高改为

.content-nav, .content-data {
            height: calc(100% - 80px);
            overflow:auto;
        }

---

而且很容易。考虑到在较旧的导航器中可能不起作用的因素，因此如果您想要追溯兼容性，您必须使用javascript，更好的定位方法是使用浮点，而不是相对和绝对位置

加

使用#nav的css并去掉所有与位置相关的css代码就可以了

如果你想要两个div的高度相同，只需添加

height:100%;
overflow: auto /* for scrolling */

在两个div的css上

height:100%;
overflow: auto /* for scrolling */