补充工具栏与内容一起成长(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>更多推荐
发布评论