1

サイドバーとメインコンテンツを使用して、ブートストラップでレイアウトを作成したいと思います。私は現在（このjsFiddleでも）次のhtmlを使用しています：

<!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

これは、「フィラー」要素を使用して実現できます。

2 つの CSS クラスを作成します。1 つは.filler(親) と呼ばれ、もう 1 つは と呼ばれる疑似要素を持つクラス.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に追加できます。fillspan4

<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 に答える