Tam*_*hen 6 html css html5 css3
我有一个HTML页面,其中包含固定高度的页眉和页脚以及介于两者之间的元素.
我希望元素始终具有屏幕的总高度(不包括页眉和页脚).例如,假设屏幕的总高度为1000px,每个页眉/页脚的固定高度为60px - > div元素高度应为880px.现在,我面临的挑战是使其响应(无论屏幕大小是什么,行为应该如所描述的那样)而不使用JavaScript/JQuery.仅限CSS.
我开始使用"身高:100%",但不知道如何继续......
<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可以帮助我吗？
小智 6
这是一个简单的设置，我认为您想要完成的任务。只有您必须为 flex 属性添加前缀/使用旧语法，才能支持 IE10。
我们有一个包装元素，我们对其说：你现在是一个 flex 元素，你的子元素可以是带有 display: flex; 的 flex(ible) 元素。
对于我们使用列的方向，默认为“行”，但我们希望它们位于彼此之下。
最后，我们定义页眉和页脚以及主元素的高度：您有 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;。
制作你的内容 divposition:absolute并给它 aleft:0;和 a right:0;。使顶部位置等于页眉的高度，使底部位置等于页脚的高度。
http://jsfiddle.net/z4h64juf/1/
希望有帮助。