CSS內容區域100％高度

我試圖將頁面的內容區域拉伸至100％。我有一個固定的標題（50px高度）和一個粘性頁腳（95px高度），其間的任何東西都應該使用100％的高度......但是我無法得到這個工作。這裏是我的CSSCSS內容區域100％高度

<div id="wrap"> 
    <!-- fixed top navigation --> 
    <div id="main"> 
     <!-- main content --> 
    </div> 
</div> 
<footer> 
    <!-- footer --> 
</footer>

的CSS是這樣

html, body { 
height: 100%; /* needed for container min-height */ 
} 

#wrap {min-height: 100%;} 

#main { 
    position:relative; /* needed for footer positioning*/ 
    overflow:auto; 
    padding-bottom: 95px; /* must be same height as the footer */ 
    padding-top:50px; 
    min-height:100%; 
} 

footer { 
    position: relative; 
    margin-top: -95px; /* negative value of footer height */ 
    height: 95px; 
    background-color:#ebebeb; 
} 

body {margin:0px;padding:0px;}

任何想法如何做到這一點？

來源

2012-03-24 Anuj Gakhar

如果你已經提出了頁腳相對（「粘」），這意味着你想讓你的網站向下滾動的內容。

所以你需要在HTML位置創建另一個div（「block」） - > header和footer之間的div，並給它一個100％的寬度和一個auto的高度; （意爲：股利將verticaly填補與內容在它的推杆量

來源

2012-03-24 14:06:01 FedeSc

並且沒有溢出，溢出用於處理div內的內容，而不是將div定位在頁面流中。 – FedeSc 2012-03-24 14:07:15

並且爲了你自己的緣故，請看一下這個教程。它會幫助你更好地理解定位。 http://www.barelyfitz.com/screencast/html-training/css/positioning/ – FedeSc 2012-03-24 14:12:27

是的，但如果內容不足以填滿空間，我希望它延伸到頁腳。即頁面背景等應該延伸到頁腳，即使內容可能不......。我希望我明確自己。 – 2012-03-24 15:17:05

可以使頁腳像

footer{ 
     position: absolute; 
     border: 3px solid #eee; 
     height: 30px; 
     top: auto; 
     bottom: 0; 
     left: 0; 
     right: 0; 
    }

來源

2012-03-24 14:40:58

如果內容超過視口，則絕對定位將不起作用.... – 2012-03-24 15:17:30

我有很多受審嘗試使用JavaScript來設置高度100％

或嘗試使用框架

UPDATE

這個AR ticle使用css http://www.dave-woods.co.uk/index.php/100-height-layout-using-css/ 但我相信90％，它可能有不同的瀏覽器有問題，但嘗試它。

和這篇文章使用jQuery http://nicholasbarger.com/2011/08/04/jquery-makes-100-height-so-much-easier/

這對於使用框架 http://www.echoecho.com/htmlframes08.htm 和 http://www.w3schools.com/html/html_frames.asp

最後，你會選擇什麼是對你的項目好運

我的問候有用

來源

2012-03-24 14:52:40 Mhmd

任何代碼例子？ – 2012-03-24 15:18:05

檢查我的更新:) ... – Mhmd 2012-03-24 19:44:15

最好的和s實現方式是

html,body{ 
height:100%; 
} 
#wrap { 
height: calc(100%-50px-95px); 
} 
.footer { 
//your code here 
height: 95px; 
}

來源

2016-03-17 11:31:19

CSS內容區域100％高度

回答

相關問題