html - 分离顶部和底部菜单容器

Question

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

在这里我们看到顶部导航栏占用了适量的屏幕 http://prntscr.com/gty4u9

但是在这里我们看到页面的其余部分占据了所有内容，而我希望它占据除顶部菜单之外的所有内容。 http://prntscr.com/gty54s

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

这是我的 CSS

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
}

Answer 1

首先，为了更加语义化的 HTML，开始使用像 <nav> 这样的标签。 , <main> , <header>等

要解决您的问题，只需添加 padding-top给你的<main>等于 height 的标记(您网页其余部分的容器)你的导航栏..

即使 bootstrap 文档也为他们的导航栏推荐了这个解决方案，尽管我认为他们已经为它创建了一个类，我认为它叫做 page-header .. 所以如果你使用 Bootstrap ，就这样做......

[编辑] 其实看了boostrap文档后，如果你使用他们的框架，你需要做的就是添加类.navbar-static-top