我有一个HTML页面，其中包含固定高度的页眉和页脚以及介于两者之间的元素。
我希望元素始终具有屏幕的总高度（不包括页眉和页脚）。例如，假设屏幕的总高度为1000px，并且每个页眉/页脚具有60px的固定高度 - ＆gt; div元素高度应为880px。 现在，我面临的挑战是使其响应（无论屏幕大小是什么，行为应该如所描述的那样）而不使用JavaScript / JQuery。仅限CSS。
我开始使用＆＃34;身高：100％＆＃34;但不知道如何继续......
<html>
<head></head>
<body>
<header class="header">my header</header>
<div class="content">content</div>
<footer class="footer">my footer</footer>
</body>
</html>
http://codepen.io/anon/pen/QbGZgL
注意：也应该支持IE 10 ......
我考虑过flexbox，但我并不了解我是如何根据自己的需要使用它的。我们假设我在页面内容中有一些文字和一些图像。 我不希望在屏幕较小时出现垂直滚动条，我希望整个内容缩小，以便填充可用的高度。
CSS3视口单元：vh / vw / vmin / vmax可以帮助我吗？
答案 0 :(得分：4)
这是一个简单的设置，我认为你想要完成。 IE10支持只有你必须为flex属性添加前缀/使用旧语法。
我们有一个包装元素，我们说：你现在是一个flex元素，你的子元素可以是flex（ible）元素，带有display：flex;
对于我们使用列的方向，默认为'row'，但我们希望它们在彼此之下。
最后我们定义页眉和页脚的高度，以及主元素的高度：你有flex属性'1'。这将填补元素之间遗留的空间。
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
height: 100%;
flex-direction: column;
-ms-flex-direction: column;
background: red;
}
header {
height: 100px;
background: blue;
}
main {
flex: 1;
background: orange;
}
footer {
height: 20px;
background: yellow;
}<div class="wrapper">
<header>
Header element
</header>
<main>
<h1> Main</h1>
</main>
<footer>
Footer
</footer>
</div>
答案 1 :(得分：2)
您可以使用绝对定位来实现这一目标。
尝试以下
CSS
.content {
position:absolute;
top:100px; /* make this equal to the height of your header tag */
bottom:100px; /* make this equal to the height of your footer tag */
left:0;
right:0;
}
header {
height:100px;
background:green;
}
footer {
height:100px;
position:absolute;
bottom:0;
left:0;
right:0;
background:red;
}
将标题设为固定高度。
将页脚设为固定高度，position:absolute加bottom:0，left:0;和right:0;。
将您的内容div position:absolute设为left:0;和right:0;。使顶部位置等于标题的高度，底部位置等于页脚的高度。
http://jsfiddle.net/z4h64juf/1/
希望有所帮助。
答案 2 :(得分：0)
你可以用css calc：
来做到这一点html,body{ height:100%; }
.content{
height: calc(100% - 120px);
}
当然，无论页脚和页眉高度的总和是什么，都必须更改120px。不要忘记供应商前缀。
更多信息：https://developer.mozilla.org/es/docs/Web/CSS/calc
建议：不要忘记使用（）内的单位，不要忘记使用 - + *符号周围的空格，否则它将无效。
答案 3 :(得分：0)
我向你推荐Flexible Box Layout Module，它在你的情况下有很好的支持（IE10 +）。 CSS的许多经典问题都可以通过它轻松解决，请查看Solved by Flexbox列表。
面对问题的一个简单方法是遵循HTML：
<div class="container">
<header>Header</header>
<main>Page contents</main>
<footer>Footer</footer>
</div>
使用简单的CSS：
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-content: stretch;
align-items: stretch;
}
.container main {
flex-grow: 1;
flex-shrink: 0;
}
请注意规格自2009年以来已经改变了三次，因此sintax和供应商前缀的需求几乎没有差异。我展示的链接也谈到了它。当然，如果您选择使用autoprefixer，则无关紧要。
答案 4 :(得分：0)
使用position:fixed;修复页眉和页脚以及内容使用
padding: 60px 0;
height: 100%;
box-sizing: border-box;
答案 5 :(得分：0)
ij
答案 6 :(得分：0)
方法1： flexbox解决方案适用于已知/未知的页眉和页脚高度。浏览器支持：IE10 +
<强> JsFiddle Demo
html {
height: 100%;
}
body {
margin: 0;
min-height: 100%;
display: -ms-flexbox; /* IE 10 */
display: -webkit-flex; /* Safari */
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
main {
-ms-flex: 1; /* IE 10 */
-webkit-flex: 1; /* Safari */
flex: 1;
background: lightgoldenrodyellow;
}
header, footer {
background: lightseagreen;
}<header>header</header>
<main>main</main>
<footer>footer</footer>
方法2： CSS table解决方案适用于已知/未知的页眉和页脚高度。浏览器支持：IE8 +
<强> JsFiddle Demo
html, body {
height: 100%;
}
body {
display: table;
width: 100%;
margin: 0;
}
.header, .main, .footer {
display: table-row;
}
.header, .footer {
background: lightseagreen;
}
.main {
height: 100%;
background: lightgoldenrodyellow;
}<div class="header">header</div>
<div class="main">main</div>
<div class="footer">footer</div>
方法3： position解决方案仅适用于已知页眉和页脚高度。浏览器支持：IE7 +
<强> JsFiddle Demo
html {
position: relative;
min-height: 100%;
}
body {
background: lightgoldenrodyellow;
margin: 20px 0;
}
.header, .footer {
background: lightseagreen;
position: absolute;
left: 0;
width: 100%;
height: 20px;
}
.header {
top: 0;
}
.footer {
bottom: 0;
}<div class="header">header</div>
<div class="main">main</div>
<div class="footer">footer</div>
答案 7 :(得分：-1)
使用页眉和页脚的固定值很简单。假设你的页眉和页脚的值都是60px，并且它们的顶部和底部都是粘性的（固定的），你有以下代码：
$gaemail = 'my email';
$gapassword = 'my password';
$gaprofileid = 'my profile id';
require 'gapi.php';
$ga = new gapi($gaemail,$gapassword);
如果您需要页眉和页脚为％，则需要将html和body的高度设置为100％，并根据相应的％值设置.content的顶部和底部。您可以考虑在CSS代码的第一部分添加html和body，只是为了遵循页面中元素的级联规则。身体应该是边距：0;
使用绝对位置和固定位置并向左侧添加0：0和右侧：0可以跳过宽度值。
答案 8 :(得分：-1)
以下是创建响应元素的快速提示，这些元素在缩放时保持其宽高比。
但是，当我们为同一元素指定padding-bottom值时，将相对于元素的宽度计算填充测量值：
.rect {
width: 100%;
height: 0;
padding-bottom: 50%;
}
正确的宽高比
您会注意到我已将元素的height属性设置为0，以确保在计算可见高度时不会将任何子元素的高度添加到填充值。
关于子元素的说明
如果您还想为子元素指定基于百分比的高度，则需要为父元素和子元素分配绝对或相对位置值：
.rect {
position: relative;
width: 100%;
height: 0;
padding-bottom: 50%;
}
.rect p {
position: absolute;
margin: 0;
height: 100%;
}
答案 9 :(得分：-1)
试试这个，
HTML
<div class="pagewidth">
<header>
</header>
<section class="wrapper">
</section>
<footer>
</footer>
</div>
CSS
html,body{
height: 100%;
background: black;
margin:0;
padding:0;
}
*{
box-sizing: border-box;
}
.pagewidth{
position: relative;
height: 100%;
min-height:100%;
}
header{
background: green;
position: absolute;
left:0;
top:0;
width:100%;
height: 30px;
z-index:2;
}
.wrapper{
background: black;
position: absolute;
left:0;
top:0;
z-index:1;
width:100%;
height:100%;
padding: 30px 0;
}
footer{
background: blue;
position: absolute;
left:0;
bottom:0;
width:100%;
height: 30px;
z-index:2;
}