全高侧边栏和全高度内容,流畅的布局
Can*_*hit 10 css css3 css-float
我知道有很多关于这个主题的答案,但他们都没有帮助我,我花了好几天才解决这个问题.90%的答案和书籍都给出了这个背景技巧,这对我没有帮助.
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;
}
现在我的布局看起来像这样:
我希望它看起来像这样:
我按照这个指南提供的可能重复,它没有帮助我认为这是因为我正在使用floats和fluid layout.
如何在保持fluid layout和float定位的同时扩展列.
Kar*_*yan 10
我已经更新了你的代码.在Plunker上查看它.
如果不需要它们,首先尝试不使用absolute或relative定位.
第二种,在你的情况下,通过给予display: inline和float: left样式,做同样的事情,所以足够只使用后者.
另外,我给自己定了height的HTML,并BODY标记为100%,并且没有为相同sidebar和content DIVS,所以他们会fill在parent"S( body)的高度.
最后,你的一个问题是财产的repeat-y价值background.它没有在x轴上重复,所以你没有看到DIVs 的实际大小.我只是把它设置为repeat而不是repeat-y.
尝试这样的事情:
标记:
<h1>Hello Plunker!</h1>
<div class="container">
<div class="sideBar">sideBar</div>
<div class="content">content</div>
</div>
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;
}