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可能会很棘手;）

Answer 2

类似的东西：

<style>
  #sidebar{width:170px; float:left;}
  #content{width:900px; float:left;}
  #container{width:1070px; margin:auto;}
</style>

<div id="container">
  <div id="sidebar">Some sort of menu...</div>
  <div id="content">Hitch hikers guide to the galaxy is 
    the greatest book ever
</div>
<div style="clear:both"></div>
<!-- probablyPutaFooterHere -->

好运的家伙

Answer 3

HTML中没有“层”这样的东西。使用该术语只会导致与其他术语相关的混淆，因此请停止这样做。

有几种方法可以做到这一点，包括流行的“人造柱”方法，我鄙视。通过谷歌搜索“等高柱”可以找到其他方法。在那里你会找到CSS和javascript解决方案，你可以将它缩小到大约两种可接受的方法。

如何在CSS中获得100％的高度？

3 个答案: