CSS 100% высоты DIVs

Question

Я спросил вчера a question о позиционировании CSS сНу, теперь я решил свою проблему с вашими ответами, но теперь я еще одна проблема, я попытаюсь объяснить,

У меня есть как показано выше, я хочу, чтобы div «B» имел высоту 100%, но что-то не так с абсолютными div, когда «C» имеет длинный контент, тогда «B» не следует «C», а высота 100% не работает , Когда свойство position установлено в fixed, оно работает на IE, но не на хроме.

Вот код 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; 
    } 

Можете ли вы помочь мне с этой проблемой? Какие свойства следует изменить?

Answer 1

Если вы просто пытаетесь продлить цвет фона в нижней части страницы, вы могли бы реализовать некоторые старые добрые»искусственную колонки:

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

Идея заключается в том, что вы добавляете фоновое изображение в ваш контейнер div (или элемент body), который имеет ту же ширину, что и столбец «B». Используйте background-position для правильного выравнивания, затем установите background-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>