我想在 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)，但如果不可能，我将采取任何措施。
最佳答案
您可以通过使用“填充”元素来实现这一点。
创建两个 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>
关于css - 使用 bootstrap 的网格时，如何使列使用其父级高度的 100%？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13910208/