CSS 全高侧边栏和全高内容，流畅布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18354018/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Full height sidebar and full height content, fluid layout
提问by Canttouchit
Possible duplicate didn't help
I know there are many answers about this topic but neither of them helped me and I spent days on this problem. 90% of the answers and books give this background trick which didn't help me.
我知道关于这个话题有很多答案，但他们都没有帮助我，我花了几天时间解决这个问题。90% 的答案和书籍都给出了这个对我没有帮助的背景技巧。
HTML
HTML
<body >
<h1>Hello Plunker!</h1>
<div class="sidebar">
<ul>
<li><a href="#">ANALYTICS</a></li>
<li><a href="#">STYLES</a></li>
<li><a href="#">VOTERS</a></li>
<li><a href="#">GET STARTED</a></li>
<li><a href="#">UPDATE</a></li>
</ul>
</div>
<div class="content">
<p>Content</p>
</div>
CSS
CSS
body{
width: 100%;
margin: 0 auto;
}
.content {
width: 95%;
display: inline;
float: left;
background: url(http://s9.postimg.org/ft91z9c6z/bg_content.png) repeat-y left top;
}
.sidebar{
width: 5%;
display: inline;
height: 100%;
float: left;
background: url(http://s21.postimg.org/kexv3aupf/bg_sidebar.png) repeat-y left top;
}
.sidebar ul{
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
list-style: none;
}
.sidebar li{
padding: 50%;
position: relative;
}
.sidebar a{
display: block;
font-size: 0.5em;
position: absolute;
bottom: 0;
left: 0;
}
Right now my layout looks like this:
现在我的布局是这样的：
And I want it to look like this:
我希望它看起来像这样：
I followed this guideoffered in the possible duplicateand it didn't help
I think this is because I'm using floatsand fluid layout.
我遵循了可能重复的本指南，但它没有帮助我认为这是因为我正在使用and 。floatsfluid layout
How can I extend the columns while keeping the fluid layoutand the floatpositioning.
如何在保持fluid layout和float定位的同时扩展列。
采纳答案by Karlen Kishmiryan
I've updated your code. Check out it on Plunker.
At first try to not use absoluteor relativepositions, if there is no need of them.
首先尽量不要使用absolute或relative位置，如果不需要它们。
The second, in your case by giving display: inlineand float: leftstyles, do the same thing, so there is enough to use only the latter one.
第二个，在你的情况下，通过给予display: inline和float: left样式，做同样的事情，所以只使用后一个就足够了。
Besides, I've set the heightof HTMLand BODYtags to be 100% and did the same for sidebarand contentDIVs, so they will fillthe parent's (body) height.
此外，我已经将heightofHTML和BODY标签设置为 100% 并且对sidebarand contentDIVs做了同样的事情，所以它们将fill是parent's ( body) 的高度。
And finally, one of your problems was the repeat-yvalue of backgroundproperty. It didn't repeat on x axis, so you didn't see the actual size of the DIVs. I've just set it to repeatinstead of repeat-y.
最后，你的问题之一是财产的repeat-y价值background。它没有在 x 轴上重复，所以你没有看到DIVs的实际大小。我只是将它设置为repeat而不是repeat-y.
回答by Danield
Try something like this:
尝试这样的事情：
Markup:
标记：
<h1>Hello Plunker!</h1>
<div class="container">
<div class="sideBar">sideBar</div>
<div class="content">content</div>
</div>
CSS
CSS
*
{
margin:0;padding:0;
}
html,body,.container, .sideBar, .content
{
height: 100%;
}
h1
{
height: 50px;
line-height: 50px;
}
.container
{
margin-top: -50px;
padding-top: 50px;
box-sizing: border-box;
}
.sideBar
{
float:left;
width: 100px;
background: aqua;
}
.content
{
overflow:hidden;
background: yellow;
}
