高度：100％和粘滯頁腳佈局。最後的戰鬥

CSS仙境。我的夢想是至少了解100％佈局，粘腳和標題。我一直在瀏覽網頁，發現有五種不同的方法可以做到這一點。高度：100％和粘滯頁腳佈局。最後的戰鬥

我相信，有某種共同點的。我想要所有的星球知道它！

我要求你深入比較這些做法，並可以告訴每個人包含哪些缺陷。每個佈局會出現哪些問題？是否有可能使用裏面的花車等來打破它？我不該用它做什麼？哪些瀏覽器沒有被覆蓋？

例子需要

來源

2010-11-20 Dan

唉...我不喜歡CSS。這就是爲什麼。也就是說，我希望你能得到一些很好的答案。 – 2010-11-20 18:07:58

我不確定爲什麼有人會想花時間在這個問題上。只需選擇第一個選項並使用它。一直使用它很長一段時間，從來沒有問題。適用於所有常見瀏覽器，包括IE6。 – Tom 2010-11-20 18:25:06

大學論文天回來了！ =） – SuperDuck 2010-11-20 18:42:58

常見的一這些邊緣是不包括在元素的高度，並且可能是負值。將高度設置爲100％可將內容包裝div的高度設置爲與屏幕相同的高度。對元素應用負邊距意味着下一個兄弟元素在元素內開始。

在第一個示例中，內容包裝是div＃wrapper，其下一個兄弟是div＃footer。首先將包裝的高度設置爲屏幕的高度（將100％高度應用於#wrapper，body和html）。這將導致包裝將整個視圖端口和頁腳視爲不可見。應用與#footer的高度值相等的負邊距將頁面元素向上移動，以使其返回到視圖中。

來源

2011-01-21 14:54:02 detaylor

有一次，我發現了一個驚人的模板，它令人驚訝的作品在所有瀏覽器，甚至是IE6，我不記得了鏈接，但這裏是CSS和它的HTML：

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

這裏是HTML：

<body> 

<div id="wrapper"> 


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


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


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


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


</body>

來源

2011-01-20 14:09:17 Naruto

awhh。有一段時間，我認爲這將內容分爲100％。但是在改變背景顏色後，你可以看到它沒有。這真的比瑞安Fait解決方案=（哦，好吧。 – Partack 2011-08-28 14:25:59

高度：100％和粘滯頁腳佈局。最後的戰鬥

回答

相關問題