CSS 100%宽度布局有两个面板 - 为什么它不起作用？

Question

我确信有很多关于100%布局的simillar问题,但首先我找不到一个有这个问题的问题,其次我想知道为什么会这样.

我正在尝试使用div和CSS创建一个流畅的布局.我完全可以自由地使用CSS3优势,最重要的是,我希望它尽可能清晰.

我开始创建包装器,里面有一个100px的高度标头.然后我做了250px宽度导航(我也尝试了25%,但结果是相同的)和50px高度的页脚.所有其他尺寸均为100%或使用CSS3 calc(100% - 150px)函数.问题是bellow标题中的元素甚至没有显示在视口中.通过很少的实验,我得到了显示的元素,但是内容div显示的问题低于其他所有(而不是左侧面板)或页脚中间的页脚溢出(绝对定位),因此它们都没有工作,他们都很脏.

我试过花车,各种尺寸,用另一个div包裹柱子,但仍然,我找不到解决方案.

这是我的代码

HTML:

<header id="head"></header>
<div id="over">

    <nav id="side-nav"></nav>

    <div id="content"></div>

</div>
<footer id="main-foot"></footer>

CSS:

html, body {
    height: 100%;
    padding: 0px;
    margin: 0px;
    background-color: white;
}

#over {
    height: auto;
    min-height: calc(100% - 150px);
}

#head {
    height: 100px;
    width: 100%;
        background-color: #D1C5C5;
}

#side-nav {
    float: left;
    height: 100%;
    width: 250px;
    background-color: #AFAFC9;
}

#content {
    float: left;
    height: 100%;
    width: calc(100% - 250px);
    background-color: #AFC9B0;
}

#main-foot {
    clear: both;
    width: 100%;
    height: 50px;
}

上面的代码是一些实验的结果,所以我可能会忽略一些错误,但我尝试了每个常见的解决方案.

我有一个绝对定位的解决方案,我确信我可以找到许多其他复杂的解决方案,但我真的很感兴趣为什么这个不起作用.

是否有人有更深入的理解愿意提供帮助？

PS:我不需要支持IE6,7,8等非CSS3浏览器......

Answer 1

Just modify your css for #over :

#over {
    height: 100%; /* Instead of auto */
    min-height: calc(100% - 150px);
}

That should solve your problem.

JSFiddle

height : auto sets the height as the height of its content, i.e its child elements.
height : 100% inherits the height of its parent.

So, here, #over calculates the height of #side-nav and #content which in-turn depend on the height of #over.

And since, #side-nav and #content don't have any content, so the height for all is 0.

因此,应该在内容建立时纠正这个问题.还有一个解决办法是设置min-height为#side-nav和#content一些px价值.

希望这可以帮助.