Html 分离顶部和底部菜单容器

我遇到的问题是，主站点内容的div使用整个网页，而我希望它从顶部导航栏下方开始。这导致页面的某些内容被顶部导航栏剪切

在这里，我们看到顶部导航栏占据了适当的屏幕面积

但在这里，我们看到页面的其余部分占据了所有内容，而我希望它占据除顶部菜单以外的所有内容

---

首先，为了获得更具语义的HTML，请开始使用标签，如

，

，

等

要解决您的问题，只需将

padding top

添加到

标签（网页其余部分的容器）中，该标签等于导航栏的

高度

即使引导程序文档为他们的navbar推荐了这个解决方案，尽管我认为他们已经为它创建了一个类，但我认为它被称为
页眉
。。所以，如果你使用的是引导，就这样做

[Edit]事实上，在看过bootstrap文档之后，如果你使用他们的框架，你所需要做的就是添加类
。navbar static top
是的，我考虑过填充，我只是认为它们可能是一种更合适的方式，但是如果bootstrap推荐的话，那么是的，我会这样做。这是一行代码，很难找到更整洁的东西：）而且由于填充使用与导航栏相同的固定高度，所以在不同的设备上不可能得到不想要的结果：）
<div class="navbar navbar-fixed-top navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand title" href="#">DSUM</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{username}} <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Sign Out</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- /.nav-collapse -->
    </div>
    <!-- /.container -->
</div>
<!-- /.navbar -->

<div class="container-fluid">
    <div class="row row-offcanvas row-offcanvas-left">
        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
            <div class="sidebar-nav">
                <ul class="nav">
                    <li ><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li class="nav-divider"></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li class="nav-divider"></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                </ul>
            </div>
            <!--/.well -->
        </div>
        <!--/span-->

        <div class="col-xs-12 col-sm-9">
            <br>
            <div class="jumbotron">
                <a class="visible-xs" data-toggle="offcanvas"><i class="fa fa-lg fa-reorder"></i></a>
                <h1>Hello, world!</h1>
                <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
            </div>
            <div class="row">

            </div>
            <!--/row-->
        </div>
        <!--/span-->


    </div>
    <!--/row-->

    <hr>



</div>
<!--/.container-->

body {
    padding-top: 50px;
}

footer {
    padding-left: 15px;
    padding-right: 15px;
}

/*
 * Off Canvas
 * --------------------------------------------------
 */
@media screen and (max-width: 768px) {
    .row-offcanvas {
        position: relative;
        -webkit-transition: all 0.25s ease-out;
        -moz-transition: all 0.25s ease-out;
        transition: all 0.25s ease-out;
        background: #ecf0f1;
    }

    .row-offcanvas-left .sidebar-offcanvas {
        left: -40%;
    }

    .row-offcanvas-left.active {
        left: 40%;
    }

    .sidebar-offcanvas {
        position: absolute;
        top: 0;
        width: 40%;
        margin-left: 12px;
    }
}

#sidebar {
    padding: 15px;
    margin-top: 10px;
}

.title {
    background-color: #1F70A8;
    text-align: left;
    font-family: 'Lato', sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: #e1ffff;
    width: 185px;
}

.sidebar-item-group {
    color: #637083;
    font-family: 'Lato', sans-serif;
    font-weight: bold
}