2列絕對佈局需要100％高度

我簡化了下面的佈局來展示我的意思。兩列都需要100％，但問題是如果1列中的內容將其拉伸到100％高度以下的滾動條，則另一列將保持100％的窗口高度。有沒有辦法確保divs總是佔據文檔的整個高度？如果您使用下面的html，則會看到當您向下滾動時，左側列高保持在窗口的原始高度。有沒有解決這個沒有JavaScript？謝謝！2列絕對佈局需要100％高度

<!DOCTYPE html> 
<html> 
<head> 
<style> 
    html,body { 
     min-height: 100%; 
    } 

    * { 
     margin: 0; 
     padding: 0; 
    } 

    .column { 
     min-height: 100%; 
     background: red; 
     position: absolute; 
     width: 200px; 
    } 

    #left { 

     left: 100px; 
    } 

    #right { 
     left: 400px; 
    } 

    #content { 
     /* This height will be unknown. 2000px is just for example to push right column down*/ 
       height: 2000px; 
    } 

</style> 
</head> 
<body> 
<div id="left" class="column"></div> 
<div id="right" class="column"> 
    <div id="content"></div> 
</div> 
</body> 
</html>

來源

2012-11-14 uguMark

與此CSS-

.column { 
     height: 100%; 
     background: red; 
     position: absolute; 
     width: 200px; 
    } 

#left { 

    left: 100px; 
    margin-bottom: -1000px; 
    padding-bottom: 1000px; 
} 

#right { 
    left: 400px; 
    margin-bottom: -1000px; 
    padding-bottom: 1000px; 
}

工作Fiddle- http://jsfiddle.net/vR4eU/

，並嘗試爲什麼這個工程：

我們使這兩個div的看起來很長，加入填充底：1000px，然後通過使用margin-bottom：-1000px來欺騙瀏覽器，它不是真的。看到這個更好地解釋解決方案的blog。

更新：大概Faux columns是一個更好的跨瀏覽器兼容的方式，可以幫助你。看到這個 - http://www.alistapart.com/articles/fauxcolumns/

來源

2012-11-14 09:28:44 Cdeez

如果您知道內容的高度，但我需要將其調整爲不同的高度，則此方法可行。內容2000px的高度只是將右列向下推 – uguMark

可能我會幫助您，但是您希望兩個div的高度相同，即使您在一列中的內容超過了窗口的100％高度。我對嗎？ – Cdeez

看看你對另一個解決方案的評論，我認爲你的意思是右欄的內容不應超過100％的高度。是嗎？ – Cdeez

如果它只是推動高度的內容，你可以通過將其設置爲最大高度：100％或給它溢出來解決：隱藏以阻止它發生。

來源

2012-11-14 09:31:33 Quinny

<!DOCTYPE html> 
<html> 
<head> 
<style> 
body, html { 
    height: 100%; /* make it fill up the screen, when content longer than 100%, will cause overflow as expected */ 
} 

.wrapper { 
    min-height: 100%; /* we don't want overflow in this layer. so make it flexible */ 
    position: relative; 
} 

.column { 
    border: 4px red dashed; /* to see the moving of the block when scroll. */ 
    width: 200px; 
} 

#left { 
    /* this need to be always the same height of .wrapper, which is at least 100% in height. */ 
    position: absolute; 
    top: 0;  
    bottom: 0; 
    left: 100px; 
} 

#content { 
    /* this can have any height you want it will change the height of .wrapper when it grows. but you can't use percent unit! */ 
    margin-left: 400px; 
    min-height: 600px; 
} 

</style> 
</head> 
<body> 
<div class="wrapper"> 
    <div id="left" class="column"></div> 
    <div id="content" class="column"></div> 
</div> 
</body> 
</html>

這應該在所有現代瀏覽器正常工作（IE7可能與此版本不工作了它不支持最小高度，通過它在IE9的IE7模式工作正常。檢查出previous one）。此解決方案使左列始終保持.wrapper的高度，該高度將自動適合內部內容的高度，並且無論#content的高度如何都保持最小高度爲100％。

查看demo。

如果您需要一些視覺效果，例如在右側顯示背景或邊框，使內容看起來至少拉伸至100％的高度。您可以使用另一個裝飾盒，如#left，並使其落後於#content。視覺滿足你的需求，你不必寫任何腳本XD。享受

查看爲此demo。

來源

2012-11-14 09:32:10 xiaoyi

感謝它幾乎在那裏。問題是它總是需要100％的文件高度。在您的解決方案中，如果內容設置爲10px高度，那麼列會包裝到此高度 – uguMark

@uguMark提供了「完美」解決方案。 – xiaoyi

2列絕對佈局需要100％高度

回答

相關問題