Question

昨天我问a question关于css div定位，现在我用你的答案解决了我的问题，但现在我有另一个问题让我试着解释一下，

enter image description here

我有一个如上所示的页面，我希望“B”div具有100％的高度但是当“C”具有长内容然后“B”不跟随“C”和100时，绝对div有问题％高度不起作用。当position属性设置为fixed时，它适用于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;
    }

你可以帮我解决这个问题吗？我应该更改哪些属性？

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>

CSS 100％高度DIV

2 个答案: