0

次のフィドルを参照してください：http：//jsfiddle.net/HXzPj/6/

HTML：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
        <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" />
    </head>
    <body>
        <div class="navbar" style="position:absolute; top:0; width:100%;">
            <div class="navbar-inner"> <a href="#" class="brand">KB</a>

                <ul class="nav">
                    <li class="active"><a href="#">Home</a>

                    </li>
                    <li><a href="#">Create page</a>

                    </li>
                </ul>
                <ul class="nav pull-right">
                    <li>
                        <p class="navbar-text">user@email.com</p>
                    </li>
                    <li class="divider-vertical"></li>
                    <li><a href="#">Upload</a>

                    </li>
                    <li class="divider-vertical"></li>
                    <li><a href="#">Manage</a>

                    </li>
                    <li class="divider-vertical"></li>
                    <li><a href="#">Password</a>

                    </li>
                    <li class="divider-vertical"></li>
                    <li><a href="#">Sign Out</a>

                    </li>
                </ul>
            </div>
        </div>
        <div class="container-fluid">
            <div class="row-fluid columns">
                <div class="span2 article-tree">Article-tree</div>
                <div class="span10 content-area">Content-area</div>
            </div>
            <div class="footer">footer</div>
        </div>
    </body>

</html>

そしてCSS：

 html, body {
    height: 100%;
}
.container-fluid {
    margin: 0 auto;
    height: 100%;
    padding-top: 62px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.columns {
    background-color: #C9E6FF;
    height: 100%;
}
.content-area, .article-tree {
    background: #bada55;
    height: 100%;
}
.footer {
    background: red;
    height: 20px;
}

画面の幅がナビゲーションバーのすべての要素を表示するのに十分な幅である場合、すべてが正常に機能します。幅を狭くすると、ナビゲーションバーはうまくスタックしますが、記事ツリーとコンテンツ領域は固定位置にとどまるため、ナビゲーションバーの後ろに部分的に隠れています。

スタック時にコンテンツがナビゲーションバーの下にプッシュされるようにするにはどうすればよいですか？これに使用する必要があり@mediaますか？

4

1 に答える 1

1

全体の混乱を少しやり直すことで問題が解決しました。誰かがこれに興味を持った場合のために、ここにコードがあります：

HTML

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
    </head>
    <body>
        <div class="navbar">
            <div class="navbar-inner"> <a href="#" class="brand">KB</a>
                <ul class="nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Create page</a></li>
                </ul>
                <ul class="nav pull-right">
                    <li><p class="navbar-text">user@email.com</p></li>
                    <li class="divider-vertical"></li>
                    <li><a href="#">Upload</a></li>
                    <li class="divider-vertical"></li>
                    <li><a href="#">Manage</a></li>
                    <li class="divider-vertical"></li>
                    <li><a href="#">Password</a></li>
                    <li class="divider-vertical"></li>
                    <li><a href="#">Sign Out</a></li>
                </ul>
            </div>
        </div>

        <div class="container-fluid container-height">
            <div class="row-fluid full-height">
                <div class="span2 article-tree">Article-tree</div>
                <div class="span10 content-area full-height"><div id='paragraphs' data-lorem='5'></div></div>
            </div>

        </div>
        <div class="container-fluid footer">
            <div class="footer">footer</div>        
        </div>
    </body>

</html>

CSS

html, body {
    height: 100%;
}
.full-height {
    height: 100%;
}
.content-area {
    background: green;
    color: white;
}

.article-tree {
    background: blue;
    color: white;
}
.footer {
    background: red;
}

.container-height {
    margin: 0 auto;
    min-height: 88%;
    height: auto;    
}

jsfiddleを参照してください：http：//jsfiddle.net/pCut6/

レスポンシブデザインなどを使用すれば、さらにうまくいく可能性がありますが、これにより、私のように立ち往生していて例が必要な場合に、誰かにアイデアを与えることができます。

于 2013-02-12T12:57:32.197 に答える