【发布时间】：2013-12-13 07:07:29
【问题描述】：
我遇到了 100% 身高的老问题。我知道这个问题被问了很多，我已经查看了this、this、this 以及无数其他问题。我想创建一个基本的固定标题、侧边导航和主要文章区域，如下所示：
但是，由于某种原因，它看起来像下面这样（我在蓝色条中放置了 200 像素的内边距，只是为了让它出现）。
我的 HTML 如下所示：
<!DOCTYPE html>
<html>
<head></head>
<body>
<header></header>
<section>
<nav></nav>
<article></article>
</section>
</body>
</html>
我的 CSS 看起来像这样：
* { -moz-box-sizing: border-box; background-color: transparent; border: 0 none; color: #000000; list-style: none outside none; margin: 0; outline: medium none; padding: 0; text-decoration: none; }
body, html { height: 100%; }
header {
background: #6c6363;
top: 0;
z-index: 100;
height: 100px;
left: 0;
position: fixed;
right: 0;
}
section {
min-height: 100%;
overflow: auto;
position: relative;
padding-top: 100px;
}
nav {
background-color: #747feb;
float: left;
min-height: 100%;
padding-bottom: 200px;
width: 150px;
}
article {
background: #74eb8a;
margin: 20px 20px 20px 170px;
min-height: 100%;
padding: 20px;
position: relative;
}
如您所见，没有什么特别的。我知道section 需要 100% 的高度，body 和 html 也是如此。我可以绝对定位nav 和acticle，然后做这样的事情：
但是，在我的实际站点中（为此我对其进行了简化），侧边导航有下拉菜单，它会动态改变导航高度。这会导致以下情况发生：
绝对定位的元素不会改变相对包装的高度，所以我需要浮动它们。但是，浮动它们不会使高度变为 100%。
我什至制作了一个 JSFiddle 来显示问题：http://jsfiddle.net/g8VjP/
如果有人可以帮助我，我将不胜感激。
谢谢！
PS：如果它有效，我完全赞成使用 calc()！
解决方案
我修改了 Mayank 的答案并设法提出了解决方案。我不得不添加几个包装器，但它起作用了。我的 HTML 现在如下所示：
<!DOCTYPE html>
<html>
<head></head>
<body>
<header></header>
<section>
<nav></nav>
<div class="cell-wrap">
<div class="table-wrap">
<article></article>
</div>
</div>
</section>
</body>
</html>
密钥是cell-wrap 和table-wrap。我有nav 是一个表格单元格，.cell-wrap 是另一个。 nav 有一个固定的，.cell-wrap 填充其余部分。但是，我想在article 周围留出间距，所以我添加了.table-cell 并将其制成表格。然后扩展并填充.cell-wrap 的高度和宽度。然后我添加 30px 填充以在 article 周围留出空间（因为边距不适用于表格单元格）并将 article 设为表格单元格。
有点混乱，但它有效！
我的 CSS 如下：
* { -moz-box-sizing: border-box; background-color: transparent; border: 0 none; color: #000000; list-style: none outside none; margin: 0; outline: medium none; padding: 0; text-decoration: none; }
body, html { height: 100%; }
header {
background: #6c6363;
top: 0;
z-index: 100;
height: 100px;
left: 0;
position: fixed;
right: 0;
}
section {
display: table;
height: 100%;
min-height: 100%;
padding-top: 100px;
position: relative;
width: 100%;
}
nav {
background-color: #657182;
display: table-cell;
min-height: 100%;
width: 150px;
}
.cell-wrap {
display: table-cell;
height: 100%;
min-height: 100%;
}
.table-wrap {
display: table;
height: 100%;
padding: 30px;
width: 100%;
}
article {
background: none repeat scroll 0 0 #FFFFFF;
display: table-cell;
min-height: 100%;
padding: 20px 20px 120px;
z-index: 1;
}
Here's the fiddle。不知道为什么底部有一个滚动条，但是如果您在浏览器中正常显示它似乎很好。
【问题讨论】：