-2

みんながそうであるように、私は箱の中の箱を持っています。左の列を高さいっぱいまで伸ばしたい。したがって、問題は、leftcolumn が contentbox の高さいっぱいまで伸びないことです。

ここにHTMLがあります

<div id="realBody">
    <div id="bigBox">
        <div id="contentBox">
            <div id="rightColumn" style="height:600px;">

            </div>

            <div id="leftColumn">

            </div>
        </div>
    </div>
</div>

CSS

@CHARSET "UTF-8";

body                {
                    height: 100%;
                    margin:0px;
                    overflow:hidden;
                    background:url(../image/bg.jpg);
                    background-repeat:repeat-x;
                    background-position:center;
                    background-color:black;
                    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
                    }



 #bigBox                {
                        width:1000px;
                        height:auto;
                        overflow:auto;
                        margin:40px auto 20px auto;
                        padding:10px;
                        }

#realBody           {
                    position:absolute;
                    z-index: 5;             
                    overflow:auto;
                    height:100%;width:100%; 
                    }

#contentBox         {
                    border-top:solid 10px #e1e1e1;
                    border-bottom:solid 10px #d1d1d1;
                    margin-top:10px;
                    background-color:white; 
                    overflow:auto;
                    height: auto;
                    box-shadow:0px 0px 20px black;
                    }



#leftColumn         {
                    position:relative;
                    width:300px;
                    padding:10px;
                    height:100%;
                    box-shadow:0px 0px 20px black;
                    background-color:#e3e3e3;
                    z-index:6;
                    }

#rightColumn        {
                    position:relative;
                    float:right;
                    width:650px;
                    padding:10px;
                    z-index:4;
                    }
4

2 に答える 2

0

HTML の高さも に設定しheight: 100%ます。:)

すべての親の要素の高さを 100% に設定する必要があります

フィドル。

CSS:

@CHARSET"UTF-8";
 html, body {
    height: 100%;
    margin:0px;
    overflow:hidden;
    background:url(../image/bg.jpg);
    background-repeat:repeat-x;
    background-position:center;
    background-color:black;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#bigBox {
    width:1000px;
    height:100%;
    overflow:auto;
    margin:40px auto 20px auto;
    padding:10px;
}
#realBody {
    position:absolute;
    z-index: 5;
    overflow:auto;
    height:100%;
    width:100%;
}
#contentBox {
    border-top:solid 10px #e1e1e1;
    border-bottom:solid 10px #d1d1d1;
    margin-top:10px;
    background-color:white;
    overflow:auto;
    height: 100%;
    box-shadow:0px 0px 20px black;
}
#leftColumn {
    position:relative;
    width:300px;
    padding:10px;
    height:100%;
    box-shadow:0px 0px 20px black;
    background-color:#e3e3e3;
    z-index:6;
}
#rightColumn {
    position:relative;
    float:right;
    width:650px;
    padding:10px;
    z-index:4;
}
于 2013-07-07T13:52:54.273 に答える