我想在bootstrap中创建一个带有侧边栏和主要内容的布局。我目前正在使用以下html(也在this jsFiddle中):
<!DOCTYPE html>
<html>
<head>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" media="screen" rel="stylesheet" type="text/css" />
<style type="text/css">
#sidebar {
background-color: lightgreen;
}
#footer {
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="span4">
<div id="sidebar">
<ul>
<li><a href="http://www....">Home</a></li>
<li><a href="http://www..../faq">Questions</a></li>
<li><a href="http://www..../news">News</a></li>
<li><a href="http://www..../contact">Contact</a></li>
</ul>
</div>
</div>
<div class="span8" id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean in purus purus.
Ut risus lorem, pharetra nec iaculis sit amet, blandit nec turpis.
Aliquam dapibus orci ac sem viverra semper cursus ante varius.
Vestibulum iaculis eleifend magna, sit amet blandit nibh dignissim pellentesque.
Etiam suscipit accumsan tincidunt.
Sed auctor, orci at pretium commodo, enim dui fermentum nulla, id blandit enim lacus non mi.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean in purus purus.
Ut risus lorem, pharetra nec iaculis sit amet, blandit nec turpis.
Aliquam dapibus orci ac sem viverra semper cursus ante varius.
Vestibulum iaculis eleifend magna, sit amet blandit nibh dignissim pellentesque.
Etiam suscipit accumsan tincidunt.
Sed auctor, orci at pretium commodo, enim dui fermentum nulla, id blandit enim lacus non mi.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
</div>
</div>
<div class="row">
<div class="span12" id="footer">
Footer
</div>
</div>
</div>
</body>
</html>
我想要的是:
但我得到的是:
我可以做些什么来让侧边栏div一直向下?理想情况下,不对html进行更改(仅限css更改),但如果不可能,我会采取任何措施。
答案 0 :(得分:0)
您可以使用“填充”元素来实现此目的。
创建两个CSS类,一个名为.filler
(父级),另一个名为.fill::before
的伪元素:
.filler{
position: relative;
}
.fill::before{
content: "";
position: absolute;
top:0;
left: 0;
width: inherit;
margin: inherit;
bottom: 0;
background-color: lightgreen;
z-index: -1;
}
然后,您可以将filler
类添加到row
元素,将fill
类添加到span4
元素:
<div class="container">
<div class="row filler">
<div class="span4 fill">
<div id="sidebar">
<ul>
<li><a href="http://www....">Home</a></li>
<li><a href="http://www..../faq">Questions</a></li>
<li><a href="http://www..../news">News</a></li>
<li><a href="http://www..../contact">Contact</a></li>
</ul>
</div>
</div>
....
</div>