Question

可能重复：
Maximize a floating 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;
}

不幸的是，侧边栏的高度与标尺不同，我怎样才能延长其高度？

由于

Answer 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>

Answer 2

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

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

Answer 3

您的#content中有更多<br/>，然后在侧边栏中。所以整个#container都是最大div元素的高度，这里面是#content，这就是#sidebar看起来更小的原因。要么在#sidebar中放入相同数量的<br/>，要么从两个div中放入<br/>，并将它们设置为高度，例如。

#sidebar{

height:100;

}

#content{

height:100;

}

如何在内部DIV中设置相同的高度？

3 个答案: