将 div 修复到引导导航栏下的页面顶部答案

【问题标题】：Fix a div to the top of a page under the boostrap nav bar将 div 修复到引导导航栏下的页面顶部
【发布时间】：2017-06-09 14:28:57
【问题描述】：

基本上，我正在尝试将页眉区域修复到所有需要页眉的页面的顶部。这个想法是使用一个 div 和一个可以在需要时应用的类。

我尝试了一个基本的固定 div，但我总是以它与内容重叠。任何人都可以解释/展示一些css来在身体顶部浮动一个div，将所有内容向下推。

它也应该被修复，所以滚动只会影响下面的内容。

我的尝试给我留下了以下结果：

如您所见，应用程序标题与表格重叠，此时所有其他内容都应向下浮动。

【问题讨论】：

标签： css twitter-bootstrap razor

【解决方案1】：

您可以对相关 div 应用固定定位，然后将 padding-top 添加到 body 以将其从顶部向下推。 Bootstrap 通过将 padding-top 添加到 navbar 组件的 body 元素并结合 .navbar-fixed-top CSS 类来实现此效果。否则，您可以将padding-top 或相对定位position: relative; 应用于内容元素。

.topbar-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%
}

.body {
    padding-top: 50px; /* height of fixed bar */
}

/* OR */

.content-element {
    position: relative;
    top: 50px;
}

【讨论】：

【解决方案2】：

使用以下代码，您可以将导航栏固定到顶部。

HTML

<nav id="header" class="navbar navbar-fixed-top">
            <div id="header-container" class="container navbar-container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a id="brand" class="navbar-brand" href="#">Project name</a>
                </div>
                <div id="navbar" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div><!-- /.nav-collapse -->
            </div><!-- /.container -->
        </nav><!-- /.navbar -->

CSS

html,
body {
    overflow-x: hidden; /* Prevent scroll on narrow devices */
}
body {
    padding-top: 100px;
}
footer {
    padding: 30px 0;
}

【讨论】：