我正在尝试将页眉、内容和页脚作为动态字段。尝试了很多不同的解决方案，它必须在多个实例中工作。我只需要在内容区域使用滚动条，所以我没有在页脚上使用绝对零。但使用表格布局。
如果您查看代码片段，您会发现内容#wrapper(yellow) 的大小与内容相同。但是当内容(#overflow，黑色)比包装器高时，我无法得到 scoller。
我知道一个小脚本可以解决这个问题，但是只用 CSS 就可以吗？？
下面的链接是类似的，但没有好的答案。也许这可能是，如果有可能在内容区域中获得一个工作滚动条。
CSS 100% height layout. Fluid header, footer and content. In IE10 and firefox
<style>
body {
margin:0;
padding:0;
height:100%;
width:100%;
overflow:hidden;
}
#wrap {
height: 150px;
width: 400px;
display:table;
position:absolute;
text-align:center;
table-layout:fixed;
border:1px solid black;
}
#header{
display:table-row;
border:1px solid red;
background:green;
}
#content{
height: 100%;
background:blue;
display:table-cell;
}
#wrapper{
width:100%;
min-height:100%;
box-sizing:border-box;
border:10px solid yellow;
position:relative;
overflow:scroll;
display:block;
}
#footer{
width: 100%;
display:table-row;
background:green;
}
</style>
<body>
<div id="wrap">
<div id="header">
HEADER
</div>
<div id="content">
<div id="wrapper">
<div id="overflow" style="height:50px;width:1px;border:10px solid black;"></div>
</div>
</div>
<div id="footer">
FOOTER
</div>
</div>
</body>最佳答案
你应该为包装元素指定一个高度
#wrapper{
width:100%;
/*min-height:100%;*/
height:100px;
box-sizing:border-box;
border:10px solid yellow;
position:relative;
overflow:scroll;
display:block;
}
Here以你的例子工作的 fiddle 。
关于html - 具有动态页眉、页脚和内容的 CSS 和 html，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27911824/