CSS高度百分比規範

我試圖給我的網站設置一個適合屏幕的應用程序，但是我遇到了一些問題，我知道CSS在基本方面的來龍去脈，但是我有點困惑使用百分比。我需要一個標題（50像素），然後我需要一個盒子（高度100％），然後是一個小盒子頁腳（20像素），但是這一切都需要在屏幕上沒有溢出，當我嘗試與給定的代碼我得到一個溢出，因爲100％的項目將頁腳壓下導致溢出滾動條。CSS高度百分比規範

<div id="holder"> <-- this is set to 100% width & height as well as html, body 

    <div id="header"> 

    </div> 

      <div id="inner_holder"> <-- This is the holder which is 100% 

      </div> 

    <div id="footer"> 

    <div/> 

</div>

來源

2011-07-28 Aiden Ryan

聽起來像你需要Google css +粘性頁腳？ – FiveTools

您可以使用CSS position屬性將頁腳定位在底部。因此，您的inner_holder div元素可自動使用剩餘空間。

<html> 
<head> 
<title>SO</title> 
<style type="text/css"> 
body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 

div#holder { 
    height: 100%; 
    background: lightblue; 
} 

div#header { 
    height: 50px; 
    background: #800000; 
} 

div#inner_holder { 
    background: lightblue; 
} 

div#footer { 
    height: 20px; 
    width: 100%; 
    background: #800000; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
} 
</style> 
</head> 
<body> 
<div id="holder"> 

    <div id="header"> 
    Header 
    </div> 

    <div id="inner_holder"> 
    Inner holder 
    </div> 

    <div id="footer"> 
    Footer 
    </div> 

</div> 
</body> 
</html>

來源

2011-07-28 01:30:03

我的建議是不要試圖使inner_holder任何固定的高度。按照正常高度固定標題。使用left和bottom位置爲0的固定高度絕對定位頁腳。讓內容正常流動，無需修改。如果需要滾動條，瀏覽器將適應。如果您需要背景顏色或圖像，只需將它們應用到body。

來源

2011-07-28 01:05:51 Tak

CSS高度百分比規範

回答

相關問題