我有一个固定高度的HTML页眉和页脚，中间有一个元素。
我希望元素始终具有屏幕的总高度(不包括页眉和页脚)。例如，假设屏幕的总高度为1000px，每个页眉/页脚的固定高度为60px——>div元素的高度应为880px。现在，我所面临的挑战是使其响应(无论屏幕大小如何，行为都应该如所描述的那样)而不使用JavaScript/JQuery。CSS。
我已经开始使用"height: 100%"，但不知道如何继续…
<html>
<head></head>
<body>
<header class="header">my header</header>
<div class="content">content</div>
<footer class="footer">my footer</footer>
</body>
</html>
注意:IE 10也应该支持…
我考虑过flexbox，但不知道如何准确地使用它来满足我的需求。假设页面内容中有一些文本和一些图像。我不希望在屏幕较小时出现垂直滚动条，我希望整个内容缩小，以便填充可用的高度
CSS3视口单位:vh/vw/vmin/vmax可以帮助我在这里吗?
这是我认为您想要完成的简单设置。IE10支持是可能的，只有你必须为flex属性添加前缀/使用旧语法。
我们有一个包装元素，我们说:你现在是一个flex元素，你的子元素可以是flex(可伸缩)元素，使用display: flex;
对于我们使用column的方向，默认是'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>您可以使用绝对定位来实现此目的。
试试下面的
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;。让顶部的位置等于你的页眉的高度，底部的位置等于你的页脚的高度
希望有帮助。
你可以使用CSS calc:
html,body{ height:100%; }
.content{
height: calc(100% - 120px);
}
当然，你必须改变120px的脚和头的高度之和。别忘了供应商的前缀。
更多信息:https://developer.mozilla.org/es/docs/Web/CSS/calc
一个建议:不要忘记使用()内部的单位，不要忘记在- + *符号周围使用空格，否则它将无法工作。
修复页眉和页脚使用position:fixed;和内容使用
padding: 60px 0;
height: 100%;
box-sizing: border-box;
http://codepen。io/anon/pen/xGRyNW
* { padding: 0; margin: 0; }
body { height: 100%; width: 100%; position: absolute; }
header, footer { height: 50px; width: 100%; background: red; position: fixed; }
footer { bottom: 0; }
main { min-height: calc(100% - 100px); padding: 50px 0; overflow: auto; }<header></header>
<main>
<p>Hello1</p>
<p>Hello2</p>
<p>Hello3</p>
<p>Hello4</p>
<p>Hello5</p>
<p>Hello6</p>
<p>Hello7</p>
<p>Hello8</p>
<p>Hello9</p>
<p>Hello10</p>
<p>Hello11</p>
<p>Hello12</p>
<p>Hello13</p>
<p>Hello14</p>
<p>Hello15</p>
<p>Hello16</p>
<p>Hello17</p>
<p>Hello18</p>
<p>Hello19</p>
<p>Hello20</p>
</main>
<footer></footer>我向您推荐Flexible Box Layout Module，它在您的情况下(IE10+)有很好的支持。CSS的许多经典问题都可以用它轻松解决，请看一下solved by Flexbox列表。
解决问题的一个简单方法是:
<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年以来，该规范已经更改了三次，因此在语法和供应商前缀的需求方面几乎没有差异。我展示的链接也谈到了这一点。当然，如果你选择使用自动修复器也没关系。
您需要使用vh(视口高度)。height: 100vh;将从上到下覆盖屏幕。
如果您想了解更多关于其他特定单位，请访问这里:https://developer.mozilla.org/en-US/docs/Web/CSS/length
使用固定的页眉和页脚值很简单。假设你的页眉和页脚的值都是60px，并将它们固定在顶部和底部，你有以下代码:
.header {
position: fixed;
top: 0;
right: 0;
left: 0;
height: 60px;
}
.footer {
position: fixed;
bottom: 0;
right: 0;
left: 0;
height: 60px;
}
.content {
position: absolute;
top: 60px;
bottom: 60px;
left: 0;
bottom: 0;
/*Now, if you need your content to overflow properly when higher than the space provided by the screen you may add:
overflow-y: scroll;
and a scrollbar will show up
*/
}
如果需要将页眉和页脚设置为%，则需要将html和body的高度设置为100%，并根据各自的%值设置.content的顶部和底部。您可以考虑在css代码的第一部分添加html和body，只是为了遵循页面中元素的级联规则。正文应为margin: 0;
使用绝对位置和固定位置，并为所有元素添加left: 0和right: 0，您可以跳过宽度值。
下面是一个溢出的例子:http://codepen.io/desginarti/pen/OVbBoe下面是创建响应式元素的快速技巧，这些元素在缩放时保持其长宽比。
然而，当我们为同一元素指定padding-bottom值时，则计算相对于元素宽度的padding值:
.rect {
width: 100%;
height: 0;
padding-bottom: 50%;
}
正确宽高比
你会注意到我已经将元素的height属性设置为0，以确保在计算可见高度时，任何子元素的高度都不会被添加到padding值中。
关于子元素的说明
如果您还想为子元素指定基于百分比的高度，您将需要为父元素和子元素分配绝对或相对位置值:
.rect {
position: relative;
width: 100%;
height: 0;
padding-bottom: 50%;
}
.rect p {
position: absolute;
margin: 0;
height: 100%;
}
查看演示
试试这个,
HTML<div class="pagewidth">
<header>
</header>
<section class="wrapper">
</section>
<footer>
</footer>
</div>
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;
}