CSS 100％高度布局。流体头，页脚和内容。在IE10和Firefox [英] CSS 100% height layout. Fluid header, footer and content. In IE10 and firefox

问题描述

这适用于Chrome： http://jsfiddle.net/EtNgv/ 我想让它工作在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.

图片： http://i.stack.imgur.com/e7ddc.png

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:

http://jsfiddle.net/mRDux/

这篇关于CSS 100％高度布局。流体头，页脚和内容。在IE10和Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！