CSSの100％の高さのDIV

Question

私は私が持っている私はあなたの答えと私の問題を解決し、今、私は別の問題は、私が説明してみましょう必要があり、

今、CSSのdivのポジショニングについて昨日a questionを尋ねましたページに上記のように、私は "B" divは100％の高さを持っているが、 "C"が長いコンテンツを持って "B"が "C"に従っておらず、100％ 。 ofのpositionプロパティがfixedに設定されている場合、IEでは動作しますが、chromeでは動作しません。ここで

は

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

は、あなたがその問題で私を助けてくださいすることができ、CSSコードのですか？どのプロパティを変更する必要がありますか？

Answer 1

あなただけのページの一番下に背景色を拡張しようとしている場合、あなたはいくつかの古き良きのどの列を実装できます。

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

アイデアは、あなたが追加することです列 "B"と同じ幅のコンテナdiv（またはbody要素）の背景イメージ。 background-positionを使って正しく整列させ、background-repeatをrepeat-yに設定します。

また、ドキュメントのすべての要素に絶対配置を使用することは、解決するよりも多くの問題を引き起こすでしょう。通常のドキュメントフローを使用してレイアウトを機能させることをお勧めします。

Answer 2

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