粘性灵活的页脚和标题CSS工作正常在WebKit，但不是在Gecko [英] Sticky flexible footers and headers CSS working fine in WebKit, but not in Gecko
问题描述
我试图构建一个布局，允许一个灵活的高度页眉和页脚，中间的部分消耗剩余的空间。
I'm attempting to build a layout that allows a flexible height header and footer, with a section in the middle consuming the remaining space. Any overflow in the middle should give a scroll bar just for this middle section.
我用的Safari和Chrome的代码是：
The code I have that works fine for Safari and Chrome is:
<!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的行为不同。中间的内容将正确展开高度，但不会收缩超过内容的高度。
I cannot for the life of me figure out why the behaviour is different in Firefox. The content in the middle will expand height correctly, but will not shrink more than the height of the contents.
很难知道什么是正确的行为。任何想法？
It's difficult to know what is the correct behaviour. Any ideas?
编辑
http://jsfiddle.net/t3mZF/ =noreferrer> http://jsfiddle.net/t3mZF/
Similar example setup here: http://jsfiddle.net/t3mZF/
有趣的是，如果 .l-fit-height-row-content 更改为 display：table-cell ，则WebKit和Gecko展示行为或忽略溢出。
Interestingly if .l-fit-height-row-content is changed to display: table-cell then WebKit and Gecko exhibit the same behaviour or ignoring the overflow.
如果使用 display：block ，则WebKit会提供所需的行为页脚仍然在底部视口），但Firefox拒绝添加滚动条，而是将页脚从屏幕底部（滚动条在视图端口 - 而不是中间内容）上推。
If display: block is used then WebKit gives desired behaviour (a scroll bar and footer remains at bottom of view port), but Firefox refuses to add the scroll bars and instead pushes the footer off the bottom of the screen (scroll bar on view port - not the middle content).
我也开了一个 bugzilla票
推荐答案
我发现了一些额外的div和一个关键的显示：inline-block 有可能使用绝对定位技巧Torben提到，在Firefox中也是如此。这意味着，作为纯CSS解决方案，可以实现完全灵活的页眉和页脚。
I've discovered with a couple of extra div's and a crucial display: inline-block it is possible to use the absolute positioning trick Torben mentions, in Firefox as well. This means that fully flexible header and footer is possible as a pure CSS solution.
<!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>
希望这有助于
这篇关于粘性灵活的页脚和标题CSS工作正常在WebKit，但不是在Gecko的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
