html - 侧边栏与内容一起成长

Question

我创建了这个示例。我正在尝试使内容（head和bodyID）和侧边栏具有相同的高度。你有什么建议我该怎么做？我在侧边栏中尝试过height: 100%，但我想我在这里遗漏了一些东西。

Answer 1

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

Answer 2

我觉得你应该使用 js 解决方案equal_heights

尽管对同一个问题进行了多次讨论

HTML/CSS：使两个浮动 div 具有相同的高度

如何让两个并排的 div 高度相同？

如何使浮动的内部 div 与最高 div 的高度相同

Answer 3

将 [height:] 插入 wrap div 和右 div 将具有身体的全高

Answer 4

根据这个答案，像这样修改你的CSS：

将这些添加到#wrap：

overflow: hidden;
position: relative;

而这些#sidebar：

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

这里也是演示。

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>