侧边栏与内容一起成长答案

【问题标题】：Sidebar grows up together with the content侧边栏与内容一起成长
【发布时间】：2013-07-22 02:14:50
【问题描述】：

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

【问题讨论】：

标签： html css

【解决方案1】：

根据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>

【讨论】：

我尝试了类似的方法，但它不适用于更多文本：jsfiddle.net/zz2u9/1
将该文本复制到我的版本中，您将看到 it works。您的版本中的问题是您将文本放入<p>s。如果您想这样做，请将 p{margin:0;} 添加到您的 CSS。

【解决方案2】：

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

【讨论】：

【解决方案3】：

我觉得你应该用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

【讨论】：

【解决方案4】：

在 wrap div 中插入 [height:]，右侧 div 将与 body 的全高一致

【讨论】：