css - 如何在 CSS 中获得 100% 的高度？

Question

我正在尝试为我的网站创建布局，但我受困于此。

我有一个 div 层，container，在它里面有两层:content 和 sidebar。

这些 div 没有固定的高度。我想让两个内部 div 具有相同的高度(可变)。

我当前的 CSS 是:

/* ========== RESET ========== */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img { 
    border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border:0;
}

/* ========== GENERAL ========== */

html, body {
    background:#222;
    color:#d0cac1;
    font-family:Verdana, sans-serif;
    font-size:12px;
}

#header {
    background:#033;
}

    #header h1 {        
        text-indent:-9999px;
        margin:0 auto;
        background-image:url("http://www.google.com.br/intl/pt-BR_br/images/logo.gif"); /* TESTING ... */
        width:276px;
        height:110px;
    }

#container {
    width:800px;
    margin:0 auto;
    height:100%;
}

#content {
    width:400px;
    float:left;

    -moz-border-radius: 30px 30px 0 0;
    -webkit-border-radius: 30px 30px 0 0;
    border-radius: 30px 30px 0 0;

    background:#721415;
    padding:30px;
    margin:30px 30px 0 0;
}

.post {
}

#sidebar {
    padding:30px;
    width:250px;

    -moz-border-radius: 30px 30px 0 0;
    -webkit-border-radius: 30px 30px 0 0;
    border-radius: 30px 30px 0 0;

    background:#721415;
    margin-top:30px;
    float:right;

}

#footer {
    clear:both;
    background:#721415;
}

提前致谢

编辑:我的演示在这里:www.gabrielbianconi.com

Answer 1

这是一个 step by step tutorial to achieve this 。

它将向您展示如何使用可能很棘手的 float 和 clear ;)