Question

我正在使用bootstrap创建一个移动网站，我正在努力使CSS正确。我想在页面上创建3个部分。导航 - 这将始终位于顶部，因此当页面滚动时，导航栏始终可见。我使用标准的bootstrap导航栏，看起来效果很好。我接下来有一个DIV显示一个漂亮的线图 - 我希望这与导航栏相同 - 即不滚动。接下来我有一个包含表的DIV，这需要可滚动。

所以基本上屏幕的上半部分应该是静态的，包含网格的下半部分应该移动。这就是我到目前为止所做的！但这似乎不正确。

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
</nav>

<div style="padding-top:70px; z-index:100; height:430px; top:0; position:absolute; padding-right:2%">
A pretty line Graph
</div>

<div style="position:relative; height:100%; overflow-y:auto; overflow-x: hidden; padding-top:430px;">
My Table

希望这很有意义.....

Answer 1

HTML：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    Place your header items here
</nav>
<div class="page-header">
    Place your chart here
</div>

<div class="container">
    Place your table here
</div>

CSS：身体{padding-top：70px; }

Bootstrap有两个静态部分

1 个答案: