讓我的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填充可用頁面空間

回答

相關問題