2 列html页面布局答案

【问题标题】：2 Column html page layout2 列html页面布局
【发布时间】：2015-12-08 08:43:45
【问题描述】：

我正在尝试创建一个基本上是左侧导航和右侧数据面板的页面布局。这两个都有页眉、内容和页脚。内容是可滚动的。我的 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 都是绝对位置。 https://jsfiddle.net/7gqc6nyz/

我希望每个可滚动内容在页眉和页脚之间占据全部空间。正如在jsfiddle中看到的内容设置高度：100％它流出外部容器的标题高度，因此即使滚动到底部也不是所有内容都可以看到？我可以使用 calc(100%-headerheight) 但似乎不优雅

有比使用定位更好的策略吗？也许是弹性装箱？

谢谢

【问题讨论】：

标签： html css

【解决方案1】：

把你的身高改成

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

如此简单。考虑在旧版导航器中可能无法使用的计数，因此如果您想要复古兼容性，则必须使用 javascript

【讨论】：

【解决方案2】：

更好的定位是使用浮动而不是相对和绝对位置。

添加

float:left;

到 #nav 的 css 并摆脱所有与位置相关的 css 代码应该可以解决问题。

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

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

在两个 div 的 css 上

【讨论】：