我正在尝试构建一个允许灵活高度的页眉和页脚的布局，中间的部分占用剩余空间。中间的任何溢出都应该为这个中间部分提供一个滚动条。
我拥有的适用于 Safari 和 Chrome 的代码是:
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.l-fit-height {
display: table;
height: 100%;
}
.l-fit-height > * {
display: table-row;
height: 1px;
background-color: red;
}
.l-fit-height-expanded {
height: auto;
background-color: blue;
display: table-row;
}
.l-scroll-content {
height: 100%;
overflow-y: auto;
}
</style>
</head>
<body>
<div class="l-fit-height">
<section>
Header
</section>
<section class="l-fit-height-expanded">
<div class="l-scroll-content">
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
</div>
</section>
<section>
Footer
</section>
</div>
</body>
</html>
我终其一生都无法弄清楚为什么 Firefox 中的行为有所不同。中间的内容会正确扩展高度，但不会收缩超过内容的高度。
很难知道什么是正确的行为。有什么想法吗？
编辑
此处设置类似示例:http://jsfiddle.net/t3mZF/
有趣的是，如果 .l-fit-height-row-content 更改为 display: table-cell 那么 WebKit 和 Gecko 会表现出相同的行为或忽略溢出。
如果使用 display: block，那么 WebKit 会提供所需的行为(滚动条和页脚保留在视口(viewport)底部)，但 Firefox 拒绝添加滚动条，而是将页脚推离屏幕底部(视口(viewport)上的滚动条 - 不是中间内容)。
我还开了一个bugzilla ticket
最佳答案
我发现有几个额外的 div 和一个关键的 display: inline-block 也可以在 Firefox 中使用 Torben 提到的绝对定位技巧。这意味着完全灵活的页眉和页脚可以作为纯 CSS 解决方案。
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.l-fit-height {
display: table;
height: 100%;
}
.l-fit-height-row {
display: table-row;
height: 1px;
}
.l-fit-height-row-content {
/* Firefox requires this */
display: table-cell;
}
.l-fit-height-row-expanded {
height: 100%;
display: table-row;
}
.l-fit-height-row-expanded > .l-fit-height-row-content {
height: 100%;
width: 100%;
}
.l-scroll {
/* Firefox requires this to do the absolute positioning correctly */
display: inline-block;
overflow-y: auto;
position: relative;
}
.l-scroll-content {
position: absolute;
top: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="l-fit-height">
<section class="l-fit-height-row">
<div class="l-fit-height-row-content">
Header
</div>
</section>
<section class="l-fit-height-row-expanded">
<div class="l-fit-height-row-content l-scroll">
<div class="l-scroll-content">
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
</div>
</div>
</section>
<section class="l-fit-height-row">
<div class="l-fit-height-row-content">
Footer
</div>
</section>
</div>
</body>
</html>
希望对你有帮助
关于html - 粘性灵活的页脚和页眉 CSS 在 WebKit 中运行良好，但在 Gecko 中却不行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12605816/