全高侧栏和全高内容，流体布局 [英] Full height sidebar and full height content, fluid layout
问题描述
/ html-css-full-height-sidebar>可能的重复，它没有帮助
我认为这是因为我使用 floats
如何在保持流体布局的同时扩展列 $
Plunker 上查看。
首先尝试不使用绝对或相对职位，如果没有需要他们。
第二个，在你的情况下，通过给予 display：inline 和 float：left styles，做同样的事情，所以有足够的只使用后者。
此外，我已设置 HTML 的 height sidebar 和内容 DIV s，因此他们将填充 父'（ body ）height。
最后，您的问题之一是 repeat-y 值 / code>属性。它没有在x轴上重复，所以你没有看到 DIV 的实际大小。我只是将它设置为 repeat ，而不是 repeat-y 。
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.
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
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 guide offered in the possible duplicate and it didn't help
I think this is because I'm using floats and fluid layout.
How can I extend the columns while keeping the fluid layout and the float positioning.
I've updated your code. Check out it on Plunker.
At first try to not use absolute or relative positions, if there is no need of them.
The second, in your case by giving display: inline and float: left styles, do the same thing, so there is enough to use only the latter one.
Besides, I've set the height of HTML and BODY tags to be 100% and did the same for sidebar and content DIVs, so they will fill the parent's (body) height.
And finally, one of your problems was the repeat-y value of background property. It didn't repeated on x axis, so you didn't see the actual size of the DIVs. I've just set it to repeat instead of repeat-y.
这篇关于全高侧栏和全高内容，流体布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
