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 回答