CSS 100％高度的身體和元素

我有一個問題，使得我的元素之一在100％的整體佈局內100％。CSS 100％高度的身體和元素

我已經嘗試了不同的定位解決方案，並且最終隱藏的內容是底部頁腳後面的浮動內容，或者內容最終位於頁腳後面，並在頁腳之後繼續顯示。

這是我的頁面佈局。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"> 

<head> 
<style> 
    *{margin:0} 
    html,body{margin:0; padding:0; height:100%} 
    .wrapper{position:relative; margin:0 auto -200px; height:auto !important; height:100%; min-height:100%} 
    .container{width:930px; margin:0 auto; text-align:left} 
    .right{float:right; width:680px; background:#FFF; margin:60px 10px 0 0; padding:0} 
    .left{float:left; width:240px} 
    .content{padding:10px} 
    .footer{position:absolute; width:100%} 
    .footer,.push{height:200px} 
</style> 
</head> 

<body> 

<div class="wrapper"> 
<div class="container"> 
<div id="left"> 
    left 
</div> 
<div class="right"> 

<div class="content"> 
    content 
</div> 

</div> 
<div class="push"></div> 
</div> 
<div class="footer"> 
    footer 
</div> 
</div> 

</body> 
</html>

爲是100％的高度和頁腳底部的頁面佈局的作品只是它的分度，我想是100％爲好，推動頁腳進一步下跌，如果內容類名內容到達頁腳而不會消失。

任何幫助最受讚賞。

http://img686.imageshack.us/img686/7725/screenshotbj.png

來源

2010-06-05 Tim

你可能有更好的運氣在姊妹網站http://doctype.com/ – msw 2010-06-05 21:31:53

修復你的html代碼來顯示一切，我會修復你的樣式你 – TheGeekYouNeed 2010-06-05 21:34:03

固定，對不起，它一直在工作，直到你實際上發佈 – Tim 2010-06-05 21:42:51

在你的代碼的頁腳位置有：絕對的，而是實際的位置（例如下：30PX;）沒有給出。另外，如果你想讓.content或.push影響.footer位置，它們必須處於相同的流程中（例如，兩個位置：static;）。給出頁腳位置：絕對按照定義將頁腳定位爲正常頁面，因此這與目標不相符。

我假設你要做的是獲得即使內容很少也是100％的頁面，頁面始終位於頁面/屏幕底部。

FooterStickAlt是一款很好的跨瀏覽器解決方案。 http://www.themaninblue.com/experiment/footerStickAlt/

來源

2010-06-05 21:49:41 Marcus

是的，我有這個使用這種佈局 - http://www.cssstickyfooter.com/ 現在我添加左邊和右邊的元素，我希望至少有權100％高度將白色背景帶到頁腳。就像現在內容一樣，它看起來很好，如果它沒有白色的內容或者沒有內容的話。 http://img686.imageshack.us/img686/7725/screenshotbj.png – Tim 2010-06-05 22:53:48

直到稍後才能看代碼，我會建議將類「clearfix」放到不完全用白色展開的div上。

Here是你可以得到什麼clearfix是一個很好的定義，併爲CSS的定義。

來源

2010-06-06 00:03:45 TheGeekYouNeed

試過了這個clearfix，它仍然沒有放下右側身體100％的高度。 – Tim 2010-06-06 12:07:11

正確的CSS應該是這樣的：

<style type="text/css" media="screen"> 
    html,body 
    { 
     margin:0; padding:0; height:100%; 
    } 
    .wrapper 
    { 
     position:relative; 
     min-height:100%; 
     /*background: #fef;*/ 
    } 
    .container 
    { 
     margin: 0 auto; 
     width: 930px; 
     padding: 0 0 200px 0; /*200 pixels at the bottom, to stay over the footer*/ 
     /*background: #fff; */ 
    } 
    .left /* This was one cause. Old line: <div id="left">, new line: <div class="left"> */ 
    { 
     float: left; 
     width: 240px; 
     /*background: #efe;*/ 
    } 
    .right 
    { 
     float: left; 
     width: 690px; 
     /*background: #efa;*/ 
    } 
    .right .content 
    { 
     padding: 10px; 
    } 
    .clear 
    { 
     clear: both; 
    } 
    .footer 
    { 
     position: absolute; 
     bottom: 0; 
     width: 100%; 
     height: 200px; 
     /*background: #eff;*/ 
    } 
</style>

我敢肯定，這會幫助你。

<div class="wrapper"> 
    <div class="container"> 
     <div class="left"> 
      left 
     </div> 
     <div class="right"> 

      <div class="content"> 
       content 
      </div> 

     </div> 
     <div class="clear"></div> 
    </div> 
    <div class="footer"> 
     footer 
    </div> 
</div>

這看起來像是你想擁有它。頁腳是在底部，每次，就像你想要它:) 希望它有幫助！

來源

2010-06-06 06:04:46

我試過這個解決方案，它給了我相同的場景。我的問題是不與右邊的列不是100％的高度。當我通過定位到div中時，除了文本在頁腳後面丟失以外，它的工作原理。基本上我試圖在已經設置100％的元素內獲得100％的高度元素 - 我認爲這是不可能的，因爲我找不到任何地方的解決方案，除非我去JS - 我不準備這樣做。 – Tim 2010-06-06 12:11:35

沒有準備好，因爲......你不知道JS或者因爲老闆的限制而無法在你的解決方案中使用JavaScript？ – TheGeekYouNeed 2010-06-06 12:21:45

我做了一個屏幕截圖，當我使用上面的佈局時得到的內容。 http://img7.imageshack.us/img7/7949/screenshotoil.png – Tim 2010-06-06 12:22:11

基於Cen寫的一個領導者找到了我自己的解決方案;搜索100％佈局仿人列，並得到這http://www.savio.no/examples/three-column-layout-6.asp

稍微調整和拼接我的佈局不同，我想出了以下解決方案，適用於所有瀏覽器。

來源

2010-06-07 12:58:46 Tim

接聽animuson：實際上下面的代碼是必要的IE6的支持：

min-height: 100%; /* real browsers */ 
height: auto !important; /* real browsers */ 
height: 100%; /* IE6: treated as min-height*/

IE6不明白!important，但它確實把高度最小高度。因此，爲了支持IE6和現代瀏覽器，您必須使用完全相同的代碼（順序非常重要）。

來源

2010-06-07 13:14:24 AMilassin

這是非常有益的 - 謝謝你。 – 2010-11-03 20:36:51

這對我來說是把它放在我的身體的CSS和「高度：100％」在HTML CSS。 – 2012-10-02 14:16:14

另一種解決方案是使用javascript（顯然不是最乾淨的方式，但在某些情況下它可能很有用）。

使用jQuery：

//Get height 
var divHeight = $('#div').height(); 

//Apply css rule 
$('#anotherDiv').css('height', divHeight);

來源

2011-08-21 09:34:19 LBridge

比較晚的答案，但它可能是有用的人。你可以簡單地使用100vh（vh是視口高度單位）

來源

2013-12-07 11:33:32 theogrost

CSS 100％高度的身體和元素

回答

相關問題