补充工具栏与内容一起成长(Sidebar grows up together with the content)

补充工具栏与内容一起成长(Sidebar grows up together with the content)

我创建了这个样本 。 我试图使内容（ head和body ID）和侧边栏的高度相同。 你有什么建议吗我怎么办？ 我尝试了height: 100%侧边栏height: 100% ，但我想我在这里缺少一些东西。

I created this sample. I am trying to make the content (head and body ids) and the sidebar the same height. Do you have any suggestions how can I do it? I tried height: 100% in the sidebar, but I guess I'm missing something here.

最满意答案

根据这个答案 ，修改你的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>

According to this answer, modify your CSS like this:

Add these to #wrap:

overflow: hidden; position: relative;

And these to #sidebar:

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

Also here is the 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>