问题描述
这适用于Chrome:我想让它工作在IE和Firefox。
This works for Chrome: http://jsfiddle.net/EtNgv/ I want to make it work in IE and Firefox.
对其他类似问题的回答说这是不可能的 - 但没有提到它是可能在Chrome - 所以我希望有人可以调整我在这里
Answers to other similar questions said that it is not possible - but did not mention that it was possible in Chrome - so I am hoping that someone could tweak what I have here to make it work in FireFox and IE10.
容器div占用100%高度 - 但没有更多。
其中包含页眉和页脚div,其高度由其内容决定。
页脚div总是与页面底部齐平。
中间的div,在页眉和页脚之间延伸。如果其内容溢出,则应滚动。
A container div that takes up 100% height - but no more.Which wraps header and footer divs whose heights are determined by their content.The footer div is always flush with the bottom of the page.A middle div which stretches between the header and footer. If its content overflows it should scroll.
图片:
CSS:
html,
body {
height:100%;
margin:0;
}
#container {
display:table;
height:100%;
width:100%;
}
#header,
#footer {
display:table-row;
background-color:#FC0;
height:2px;
}
#middle {
display:table-row;
overflow:hidden;
position:relative;
}
#content {
height:100%;
overflow-y:scroll;
}
HTML:
<div id="container">
<div id="header">header<br/>header line 2<br/></div>
<div id="middle">
<div id="content">Burrow under covers...</div>
</div>
<div id="footer">footer</div>
</div>
这适用于Chrome,但在IE和Firefox中,如果内容大于中间div
This works in Chrome, but in IE and Firefox if the content is larger than the middle div the container becomes larger than 100% high and the page obtains a scroll bar.
推荐答案
好了,我接近了,但它仍然感觉有点马虎。我不能想象创建一个这样的页面,而不使用jQuery来确定屏幕的高度,#footer,#header等...
Well, I got close, but it still feels kinda sloppy. I can't imagine creating a page like this without using jQuery to determine the height of the screen, #footer, #header, etc...
Forked Fiddle:
这篇关于CSS 100%高度布局。流体头,页脚和内容。在IE10和Firefox的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!