Html 如何在inners DIV中设置相同的高度？

可能重复：

我有以下HTML代码：

    <div id="container">


        <div id="sidebar">

            left
            <br /><br /><br /><br /><br /><br />
        </div>

        <div id="content">
            right
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            bla bla
        </div>

        <div class="clear"></div>

    </div>  

不幸的是，侧边栏的高度与cointaner不同，如何扩展其高度

---

谢谢

您可以将容器元素的背景色设置为与侧边栏相同的背景色。这样，它至少看起来像侧边栏延伸到底部

如果您需要侧边栏真正向下扩展，我认为最简单的方法是使用一个表。使用CSS可能有一种方法可以做到这一点，但我已经搜索了很多，还没有找到一种方法。

您的内容比侧边栏中的内容更多。所以整个容器的高度是最大div元素的高度，其中包含内容，这就是为什么边栏看起来更小的原因。要么在侧边栏中放入相同数量的，要么从两个div中移动，并设置两个div的高度

#sidebar{

height:100;

}

#content{

height:100;

}

---

可能不是您想要的，但请尝试以下方法：

<style>
#container {
    width: 760px;

    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;   

    overflow: hidden;
    background: #ffffff;
    border: 1px solid #cdcdcd;      
    position: relative; //Makes the children in the container positionable
}

#sidebar {
  bottom: 0px; //position side bar.
  left: 0px; //position side bar.
  top: 0px; //position side bar.
  width:25%;
  background:#555;
  position: absolute
}

#content {
  margin-left: 25%;
  width:75%;
  background:#eee;
}


.clear {
  clear: both;
}
</style>
  <div id="container">


        <div id="sidebar">

            left
            <br /><br /><br /><br /><br /><br />
        </div>

        <div id="content">
            right
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            bla bla
        </div>

        <div class="clear"></div>

    </div>  

<style>
#container {
    width: 760px;

    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;   

    overflow: hidden;
    background: #ffffff;
    border: 1px solid #cdcdcd;      
    position: relative; //Makes the children in the container positionable
}

#sidebar {
  bottom: 0px; //position side bar.
  left: 0px; //position side bar.
  top: 0px; //position side bar.
  width:25%;
  background:#555;
  position: absolute
}

#content {
  margin-left: 25%;
  width:75%;
  background:#eee;
}


.clear {
  clear: both;
}
</style>
  <div id="container">


        <div id="sidebar">

            left
            <br /><br /><br /><br /><br /><br />
        </div>

        <div id="content">
            right
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            bla bla
        </div>

        <div class="clear"></div>

    </div>