0

可能重复：
最大化浮动 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>

这是CSS代码：

#container {
    width: 760px;

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

    overflow: hidden;
    background: #ffffff;
    border: 1px solid #cdcdcd;      
}

#sidebar {
    float:left;
    width:25%;
    background:#555;
}

#content {
    float:left;
    width:75%;
    background:#eee;
}


.clear {
  clear: both;
}

不幸的是，侧边栏的高度与硬币的高度不同，我该如何扩展它的高度？

谢谢

4

3 回答 3

1

可能不是您正在寻找的东西，但试试这个：

<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>
于 2012-05-03T18:25:47.993 回答
0

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

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

于 2012-05-03T17:57:09.427 回答
-2

#content 中的内容比侧边栏中的内容更多<br/>。所以整个#container 的高度是内部最大的div 元素的高度，即#content，这就是为什么#sidebar 看起来更小。<br/>要么在#sidebar中放置相同数量的，要么<br/>从两个div中删除's并将它们设置为它们的高度，例如

#sidebar{

height:100;

}

#content{

height:100;

}
于 2012-05-03T17:57:35.697 回答