如何将内容放在固定标题下方

Question

我在标题下方放置了两个 div 并将其设置为固定，然后我的 div 不可见，它在固定的内部。 请在不使用 margin-top 的情况下帮助我，因为如果我想在标题后使用多个 div，它可能不正确。

 var Deb = []; $.noConflict(); jQuery(document).ready(function($) { Deb.push(document.location); });

 /*add*/ .nav>li>a:focus, .nav>li>a:hover { background: transparent!important; } body { margin: 0; padding: 0; font: 400 14px/24px 'Open Sans', sans-serif; } #header { float: left; width: 100%; position: relative; } .head-top { float: left; width: 100%; position: fixed; background: red; z-index: 999; } #nav { padding: 0; margin: 16px 0 0 0; list-style: none; } #nav li { display: inline-block; float: none; position: relative; padding: 0 0 20px 0; } #nav .active { background: transparent; } #nav li a { font: 400 14px/14px 'Lato', sans-serif; color: #000; text-transform: uppercase; text-decoration: none; padding: 0 20px; display: block; position: relative; z-index: 20; } #nav li:hover>a { background: none; } #nav li ul li a:hover, #nav li ul li:hover>a { text-decoration: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" /> <header id="header"> <section class="head-top"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="left-side"> <h1>sandeep</h1> </div> </div> <div class="col-md-6"> <div class="right-side"> <nav class="navbar "> <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> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav" id="nav"> <li class="active"><a href="#" data-tab='main'>Home</a></li> <li><a href="#aboutus" data-tab="aboutus">About</a></li> <li><a href="#gallery" data-tab="gallery">Gallery </a></li> <li><a href="#career" data-tab="career">career</a></li> </ul> </div> </nav> </div> </div> </div> </div> </section> </header>

Answer 1

如果您在此处使用position: fixed ，您也可以在此处使用padding 。

我计算了标题的总高度并将该总高度添加到padding-top

section#mainSection {
  padding-top: 75px;
}

@media (max-width: 992px) {
  section#mainSection {
    padding-top: 141px;
  }
}

现在您需要将所有内容添加到这个#mainSection这样就不会出现问题。

 var Deb = []; $.noConflict(); jQuery(document).ready(function($) { Deb.push(document.location); });

 /*add*/ .nav>li>a:focus, .nav>li>a:hover { background: transparent!important; } body { margin: 0; padding: 0; font: 400 14px/24px 'Open Sans', sans-serif; } #header { float: left; width: 100%; position: relative; } .head-top { float: left; width: 100%; position: fixed; background: red; z-index: 999; } #nav { padding: 0; margin: 16px 0 0 0; list-style: none; } #nav li { display: inline-block; float: none; position: relative; padding: 0 0 20px 0; } #nav .active { background: transparent; } #nav li a { font: 400 14px/14px 'Lato', sans-serif; color: #000; text-transform: uppercase; text-decoration: none; padding: 0 20px; display: block; position: relative; z-index: 20; } #nav li:hover>a { background: none; } #nav li ul li a:hover, #nav li ul li:hover>a { text-decoration: none; } section#mainSection { padding-top: 75px; } @media (max-width: 992px) { section#mainSection { padding-top: 141px; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" /> <header id="header"> <section class="head-top"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="left-side"> <h1>sandeep</h1> </div> </div> <div class="col-md-6"> <div class="right-side"> <nav class="navbar "> <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> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav" id="nav"> <li class="active"><a href="#" data-tab='main'>Home</a></li> <li><a href="#aboutus" data-tab="aboutus">About</a></li> <li><a href="#gallery" data-tab="gallery">Gallery </a></li> <li><a href="#career" data-tab="career">career</a></li> </ul> </div> </nav> </div> </div> </div> </div> </section> </header> <section id="mainSection"> <p>Hello</p> </section>