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

我试图制作一个简单的DIV布局，与IE兼容，并且它给了我地狱。让我的DIV伸展以在IE中使用有效的CSS填充可用页面空间

这里是基本的布局，我的工作：

<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>

我使用CSS圆润的机身边角DIV，和我有一个#footer导航栏和页脚信息以及一个标签式导航栏主在#header。

我的主要问题是使#content div垂直伸展，以适应整个页面，因为我只有少量内容而不创建垂直滚动条。

如果我制作#contentheight: 100%;页眉和页脚会导致页面高度超过100％并触发滚动条。

制作#content的身高88％并在Firefox中招，但有两个问题的解决方案：

一）这是一个丑陋的黑客二）它不工作在IE（当然）。

任何人都有如何做到这一点的想法？我认为对于那里的网页设计师来说应该是一个相当普遍的情况。

来源

2010-08-19 MarathonStudios

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

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; 
}

来源

2010-08-19 08:05:57 Naruto

我不认为有一种官方的方式来实现这一点，除非你使用怪异模式。如果您使用的怪癖模式（无DOCTYPE），它会是这个样子：

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

#content { 
    height: 100%: 
}

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

来源

2010-08-19 04:57:05 ashicus

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

回答

相关问题