让div占据100％的身高，减去固定高度的页眉和页脚
从我的研究来看，这似乎是一个绝对经典的CSS问题，但我找不到确切的答案-所以是StackOverflow。
如何将内容div设置为占主体高度的100％，减去固定高度的页眉和页脚所占的高度？
<body>
<header>title etc</header>
<div id="content">body content</div>
<footer>copyright etc</footer>
</body>
//CSS
html, body {
height: 100%;
}
header {
height: 50px;
}
footer {
height: 50px;
}
#content {
height: 100% of the body height, minus header & footer
}
我想使用纯CSS，并且答案在所有浏览器中都是防弹的。
问题答案：
这个版本将在所有最新的浏览器工作，IE8，如果你有Modernizr的脚本（如果不只是改变header和footer成divS）：
html,
body {
min-height: 100%;
padding: 0;
margin: 0;
}
#wrapper {
padding: 50px 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#content {
min-height: 100%;
background-color: green;
}
header {
margin-top: -50px;
height: 50px;
background-color: red;
}
footer {
margin-bottom: -50px;
height: 50px;
background-color: red;
}
p {
margin: 0;
padding: 0 0 1em 0;
}
<div id="wrapper">
<header>dfs</header>
<div id="content">
</div>
<footer>sdf</footer>
</div>
-
问题内容： 我最近一直在研究CSS布局，该布局将显示固定宽度（最小宽度，最好可扩展）的单个居中列，占据整个高度（减去页眉和页脚）。 有什么建议吗？我尝试过这里发布的几种方法，但是没有一种符合我的标准。另外，我不想为此使用JS，因此它必须是纯CSS。 我不是专家，所以我不知道采用哪种方法： 三列，每边的边距减去中心列宽度的一半再加上一个假的中心列，以拉伸到100％的高度？我有点不喜欢这个主意，因为我
-
我正在纠结于应用程序的布局。我只想用HTML&CSS来实现它，但绝望正在逼近。我需要： 固定高度、100%宽度、静态标题 固定高度、100%宽度、静态页脚 固定宽度的内容区域，居中和全部剩余高度 内容区域需要： 两列，均为全高 上面的内容相当简单，但可能需要更改以适应下一部分。 每一列都需要： 静态标头 静态页脚 页眉和页脚之间的可滚动内容区域 我花了一天的时间尝试各种方法（甚至是基于--喘息--
-
问题内容： 我最近一直在研究CSS布局，该布局将显示固定宽度（最小宽度，最好可扩展）的单个居中列，占据整个高度（减去页眉和页脚）。 有什么建议吗？我已经尝试过这里发布的几种方法，但是没有一种符合我的标准。另外，我不想为此使用JS，因此它必须是纯CSS。 我不是专家，所以我不知道采用哪种方法： 三列，每列的边距减去中心列宽度的一半再加上一个假的中心列，以拉伸到100％的高度？我有点不喜欢这个想法，因
-
我想知道是否有可能使UITableView的一部分的页眉/页脚的高度等于页眉/页脚标题文本的高度。任何提示都很好！ 注意：我的TableView的某些部分可能没有页眉/页脚，在这种情况下，只会在部分之间填充，因为在这种情况下，“页眉高度/页脚标题高度”将为零。
-
我试图设置一系列div的背景图像，每个都有自己固定的高度，并拉伸以填充宽度，即使顶部/底部有溢出被剪辑。我只是不想边缘有空白。 目前，我有：http://jsfiddle.net/ndKWN/ CSS
-
问题内容： 我有一个包装器div，其中两个容器彼此相邻。在此容器上方，我有一个包含我的标头的div。包装div必须为100％减去标题的高度。标头约为60像素。这是固定的。所以我的问题是：如何将包装div的高度设置为100％减去60像素？ 问题答案： 这是一个正常工作的CSS，已在Firefox / IE7 / Safari / Chrome / Opera下进行了测试。 w3c尚未批准“ over