如何將內容放在固定標題下方

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>