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

回答

相关问题