1

我想在引导程序中创建一个带有侧边栏和主要内容的布局。我目前正在使用以下 html（也在这个 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），但如果不可能，我会采取任何措施。

4

1 回答 1

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>
于 2012-12-17T10:35:22.917 回答