CSS 100% DIVs Height

Question

I asked yesterday a question about placing a css div, now I solved my problem with your answers, but now I have another problem, let me try to explain

I have a page as shown above, I want div “B” to be 100% high, but something is wrong with absolute divs, when “C” has long content, then “B” should not follow “C”, and 100% height does not work. When the position property is set to fixed, it works on IE, but not on chrome.

Here is the CSS code,

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

Could you help me with this problem? What properties should be changed?

Answer 1

, fa ':

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>