Question

我正在尝试制作一个与IE兼容的简单DIV布局，它让我很难过。

这是我正在努力的基本布局：

<div id="body" style="background: blue;">
<div id="header">
 HEADER
</div>
<div id="content" style="height: 88%;">
 CONTENT HERE
</div>
<div id="footer">
 FOOTER
</div>
</div>

我在Body div上使用CSS圆角，我在#footer中有一个导航栏和页脚信息以及#header中的选项卡式主导航栏。

我的主要问题是，当我只有少量内容而没有创建垂直滚动条时，#content div拉伸垂直以适合整页。

如果我使#content height: 100%;页眉和页脚导致页面高度超过100％并触发滚动条。

使#content的高度达到88％可以解决FireFox问题，但此解决方案存在两个问题：

a）这是一个丑陋的黑客 b）它在IE中不起作用（当然）。

任何人都有关于如何实现这一目标的想法？我认为对于网页设计师而言应该是一个相当普遍的情况。

Answer 1

你去，尝试这个模板，它非常简单，我认为它可以解决你的问题。

HTML：

<div id="wrapper">
    <div id="header">
    <div id="header_900">
    <p>header</p>
    </div><!--header_900-->
</div>      
<div id="content">
    <div id="content_900">
        <p>content</p>
    </div>  </div>      

</div><!--wrapper-->


<div id="footer">
<div id="footer_900">
    <p>footer</p>   
</div>    </div>

CSS

body, html{
height: 100%;
}

body, p {
margin: 0; padding: 0;
}   

#wrapper {
min-height: 100%;
}

* html #wrapper {
height: 100%;
}



/*HEADER------------------------------------*/
#header {
width: 100%;
background: #666;
}

#header_900 {
width: 960px;
height: 100px;
margin: 0 auto;
position: relative;
overflow: hidden;
}

/*FOOTER------------------------------------*/
#footer {
width: 100%;
height: 100px;
margin: -100px auto 0 auto; /*THIS SHOULD BE EQUAL TO THE FOOTERS HEIGHT*/
position: relative;
background: #666;
}

#footer_900 {
width: 960px;
height: 100px;/*THIS IS THE FOOTERS HEIGHT*/
position: relative;
margin: 0 auto;
}

/*CONTENT------------------------------------*/
#content {
width: 100%;
padding-bottom: 100px; /*THIS SHOULD BE EQUAL TO THE FOOTERS HEIGHT*/
}

#content_900 {
width: 960px;
margin: 0 auto;
overflow: hidden;
}

Answer 2

除非你使用怪癖模式，否则我认为没有正式的方法来实现这一点。如果你使用quirks模式（没有doctype），它看起来像这样：

html, body {
    margin: 0;
    padding: 0;
    height: 100%:
}

#content {
    height: 100%:
}

也许您正在寻找的是这样的改编版本：http://www.alistapart.com/comments/fauxcolumns

使我的DIV伸展以在IE中使用有效的CSS填充可用的页面空间

2 个答案: