CSS 100％高度的DIV

昨天a question我問關於CSS DIV定位，現在我解決我的問題，你的答案，但現在我還有一個問題，讓我跟你解釋，CSS 100％高度的DIV

enter image description here

我有一個頁面如上所示，我希望「B」div具有100％的高度，但是當「C」具有長內容時，絕對div有錯誤，那麼「B」不在「C」之後，並且100％高度不起作用。當位置屬性被設置爲固定時，它在IE上工作，但不在Chrome上。

這裏是CSS代碼，

* 
    { 
     padding: 0; 
     margin: 0; 
    } 


    #container 
    { 
     background-color: Fuchsia; 
     height:100%; 
     width:100%; 
     position: absolute; 

    } 


    #a 
    { 
     width: 100%; 
     height: 100%; 
     background-image: url(images/img01.jpg); 
     background-repeat: repeat-x; 
     position: absolute; 
     z-index:0; 
    } 



    #b 
    { 
     margin-left: 40px; 
     float: left; 
     background-image: url(images/left_menu_filler.jpg); 
     background-repeat: repeat-y; 
     position: absolute; 
     margin-top: 0px; 
     height: 100%; 

    } 

    #c 
    { 
     width: 800px; 
     height: 10200px; 
     margin-top: 125px; 
     margin-left: 230px; 
     background-color: #999999; 
     position: absolute; 


    } 



    #d 
    { 
     width: 0px; 
     height: 0px; 
     margin: 10px 20px 0px 0px; 
     background-color: #ff0220; 
     position: absolute; 
    } 

    #e 
    { 
     width: 300px; 
     height: 26px; 
     margin: 0px 80px 0px 0px; 
     float: right; 
     background-color: #ff0220; 
    }

能否請你幫我這個問題？我應該更改哪些屬性？

來源

2011-03-02 adnanturken

如果你只是想延長背景顏色的頁面的底部，你可以實現一些好的醇」人造列：

http://www.alistapart.com/articles/fauxcolumns/

的想法是，你加背景圖像到您的容器div（或body元素），其寬度與列「B」相同。使用background-position將其正確對齊，然後將background-repeat設置爲repeat-y。

另外，對於它的價值，對文檔中的每個元素使用絕對定位幾乎肯定會導致比解決問題更多的問題。我建議更好地嘗試使用普通文檔流程來讓佈局工作。

來源

2011-03-02 19:37:57

<script type="text/javascript"> 
    function fitContent() { 
     var contentHeight1 = window.innerHeight - 154; 
     var contentHeight2 = document.documentElement.clientHeight - 154; 

     if (window.innerWidth) { 
      //for browsers that support window.innerWidth 
      document.getElementById("...").style.height = contentHeight1 + "px" 
     } 
     else if (document.documentElement.clientHeight) { 
      //for browsers that support document.body.clientWidth 
      document.getElementById("...").style.height = contentHeight2 + "px" 
     } 
    } 

    window.onload = fitContent; 
    window.onresize = fitContent; 

</script>

來源

2011-03-02 19:16:16

CSS 100％高度的DIV

回答

相關問題