动态页眉、内容和页脚的经典布局
我知道这已经被问了上千次了，我已经用各种方法挖掘了一段时间。
基本上，我有一个页眉和一个具有未知高度的页脚，我需要内容来填充剩下的内容。我需要能够在内容中做我想做的事。
<header>Header</header>
<div class="content">
<div class="table-cell">
<div class="something">Something</div>
</div>
</div>
<footer>Footer</footer>http://jsfiddle.net/a3nvjqvg/
我以前是用display: table-row来做的，这一切都很好，但是现在我需要支持IE10，在IE10中，我不能在内容中创建一个可以有100%高度的div --它不尊重它的父级高度和滚动条的出现(在IE10中检查上面的花键)。
所以现在我想，是时候试一下柔印盒了，因为它们现在得到了普遍的支持。这是我的小提琴：
<header>Header</header>
<div class="content">
<div class="something">Something</div>
</div>
<footer>Footer</footer>http://jsfiddle.net/waLwfthb/
与适当的前缀，这工作，甚至在IE。然而，在Chrome中，我无法填充整个flex容器。
我不想做任何嵌套的柔性版或任何更复杂的事情，我只想要这个基本的布局，这样我就可以开始在内容类中工作，就好像它是我的整个页面，而忘记了页眉和页脚。在这个时代，做起来还那么难吗？我可能错过了一些很简单的东西，希望有人能帮上忙。我认为这是一个相当广泛的使用flex，但似乎大多数的问题和答案是关于更具体的情况。
回答 3
Stack Overflow用户
发布于 2015-03-24 07:59:10
如果有人后来偶然发现了这个问题，下面是你怎么做的(愚蠢的我没有更早地想到这个问题，我猜我的大脑在沸腾)
你需要使用绝对定位。以下是IE10、FF、Chrome、Opera和Safari中的最后一把小提琴：http://jsfiddle.net/waLwfthb/5/
html {
height: 100%;
}
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
-webkit-flex-direction: column-reverse;
}
header {
background: green;
position: relative;
}
header:hover {
}
header:hover::after {
position: absolute;
top: 100%;
left: 20px;
background: white;
content: 'I am a dropdown menu';
display: inline-block;
}
.content {
flex: 1;
-ms-flex: 1;
-webkit-flex: 1;
position: relative;
background: pink;
}
.something {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: yellow;
}
footer {
background: cornflowerblue;
}<footer>Footer</footer>
<div class="content">
<div class="something">Something</div>
</div>
<header>I'm a menu, hover you mouse</header>
--一个小小的解释：由于必须在内容中使用相对/绝对位置，所以它比其他任何东西都高。这是不理想的，因为在您的标题，您可能有下拉菜单，将落后的内容。我还试图避免显式的z-索引，因此我将这些块按html的相反顺序排列，并使用了flex方向:列-反向；这使css/html稍微复杂化了一点，使它从一个普通示例中移到了更远的位置，但如果是真实的情况，则更多。
作为一种奖励，这里有一个对导航窗格、内容和侧边栏的修改：http://jsfiddle.net/waLwfthb/6/
希望这能对未来的人有所帮助。
Stack Overflow用户
发布于 2015-03-23 18:40:24
您只需要从子div中删除height: 100%并将display: flex添加到容器中。
这在Chrome中适用于我：
html {
height: 100%;
}
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
header {
background: green;
}
.content {
flex: 1;
background: pink;
display: flex;
}
.something {
background: yellow;
width: 100%;
}
footer {
background: cornflowerblue;
}<header>Header</header>
<div class="content">
<div class="something">Something</div>
</div>
<footer>Footer</footer>
Stack Overflow用户
发布于 2015-03-24 08:04:14
试试这个..。我获得了windows高度的值，并使javascript更改了内容的值，该值将页眉和页脚分开，您仍然可以定期使用它。
希望这能有所帮助！
document.onreadystatechange = function()
{
if(document.readyState == "complete")
{
var myw = window.innerWidth;
var myh = window.innerHeight;
document.getElementById("content").style.width = "auto";
document.getElementById("content").style.height = window.innerHeight+"px";
//alert("done");
}
}*
{
margin:0;
padding:0;
border:0;
text-align:center;
font-family: verdana;
}
ul
{
list-style-type: none;
}
a:link{text-decoration:none; color:#44f;}
a:link:hover{text-decoration:none; color:#aaf;}
#content
{
position:relative;
}
li
{
display:inline;
}<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="container">
<header>
<h1>Welcome</h1>
<nav>
<ul>
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
</nav>
</header>
<div id="content">
</div>
<div id="footer">
All Rights Reserved.
</div>
</div>
</body>
</html>
https://stackoverflow.com/questions/29217473
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号