补充工具栏与内容一起成长

Question

我创建了this sample。我正在尝试将内容（head和body ID）和侧边栏设置为相同的高度。你有什么建议我怎么办？我在侧边栏中尝试height: 100%，但我想我在这里遗漏了一些东西。

Answer 1

尝试将一些高度设置为#wrap div，例如。最小高度：500px;而不是将内容和侧边栏设置为高度：100％; - 这应该够了吧。 - 哦，我看到你在内容div中还有两个div，你需要设置它们的宽度。

Answer 2

我觉得你应该选择js解决方案equal_heights

虽然对同一问题进行了多次讨论

HTML/CSS: Making two floating divs the same height

How do I keep two divs that are side by side the same height?

How to make floating inner divs the same height as the highest div

Answer 3

在包裹div中插入[height：]，右边div将在身体的全高度

Answer 4

根据this answer，修改你的CSS：

将这些内容添加到#wrap：

overflow: hidden;
position: relative;

这些是#sidebar：

height: 100%;
position: absolute;
right: 0;

此处还有demo。

CSS

#wrap {
   margin: auto;
   width: 400px;
   overflow: hidden;
   position: relative;
}

#sidebar {
   float: right;
   width: 100px;
   background: red;
   height: 100%;
   position: absolute;
   right: 0;
}

#content {
   float: left;
   width: 300px;
}

#head {
   background: green;
   color: #000;
}

#body {
   background: #000;
   color: #FFF;
   min-height: 300px
}

HTML

<div id="wrap">
    <div id="sidebar">
        <ul>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
        </ul>
    </div>

    <div id="content">
        <div id="head">Hello</div>
        <div id="body">World</div>
    </div>
</div>