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：我不需要支持非CSS3浏览器，如IE6,7,8等......

Answer 1

只需修改#over的css：

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

这应该可以解决你的问题。

JSFiddle

height : auto将高度设置为其内容的高度，即其子元素 height : 100%继承其父级的高度。

所以，在这里，#over计算#side-nav和#content的高度，而#over和#side-nav的高度依赖于#content的高度。

由于0和min-height没有任何内容，因此所有内容的高度均为#side-nav。

因此，应该在内容建立时纠正这个问题。另一个解决方案是为#content设置px，为{{1}}设置{{1}}值。

希望这有帮助。

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

1 个答案: