2

我敢肯定有很多关于 100% 布局的类似问题，但首先我找不到有这个确切问题的问题，其次我想知道为什么会发生这种情况。

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

我首先创建了一个包装器，里面有一个 100px 高度的标题。然后我做了一个 250px 宽度的导航（我也尝试了 25%，但结果是一样的）和一个高度为 50px 的页脚。所有其他尺寸为 100% 或使用 CSS3 calc(100% - 150px) 函数。问题是标题下方的元素甚至没有显示在视口中。通过很少的实验，我得到了显示的元素，但是在其他所有内容（而不是左侧面板）或页脚溢出（绝对定位）时显示内容 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浏览器...

4

1 回答 1

5

只需修改您的CSS #over：

#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价值。

希望这可以帮助。

于 2013-09-12T14:30:25.200 回答