CSS 框高度不会拉伸到 100%答案

【问题标题】：CSS box height don't strecthes to 100%CSS 框高度不会拉伸到 100%
【发布时间】：2013-07-04 22:58:39
【问题描述】：

我和每个人一样有一个盒子里的盒子。我希望将左列拉伸到全高。所以问题是左列没有伸展到内容框的全高。

这里是 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;
                    }

【问题讨论】：

标签： html css height

【解决方案1】：

将 HTML 的高度也设置为height: 100%； :)

您需要将每个父元素的高度设置为 100%

Fiddle.

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

【讨论】：

【解决方案2】：

这是另一个Fiddle

/* Set height: 100% for both of body, html */
html, body {
    height: 100%;
}
body {
    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;
    position: relative;
}
#leftColumn {
    position:absolute; /* User position:absolute; */
    left: 0;           /* Set left: 0; */      
    top: 0;            /* Set top: 0; */
    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;
}

【讨论】：