填充不適用div

我不是前端開發人員，所以我懷疑我可能會錯過一些非常基本的東西。不過，我無法找出解決方案。我有一個div元素，我只是想在頂部應用一些padding，這樣它就不會干擾標題。我環顧四周，看到類似的邊緣崩潰問題，但我不認爲是這種情況，因爲我在這裏處理兩個不相互包圍的div（tot-header和content）。這就是我迄今爲止所寫的內容。填充不適用div

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Blogologo</title> 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
     <link href="css/head.css" type="text/css" rel="stylesheet" /> 
    </head> 
    <body> 
     <div class="tot-header"> 
      <div class="page-header"> 
       <h1>Blogologo</h1> 
      </div> 
      <nav class="navbar navbar-default"> 
       <div class="container-fluid"> 
        <ul class="nav navbar-nav"> 
         <li class="active"><a href="#">Home</a></li> 
         <li><a href="#">Racconti</a></li> 
         <li><a href="#">Rubriche</a></li> 
         <li><a href="#">Pesce fritto e baccal&#224;</a></li> 
        </ul> 
       </div> 
      </nav> 
     </div> 
     <div class="content"> 
      <div class="container"> 
       <div class="row">       
        <div id="central" class="col-md-8"> 
         Preview 
        </div> 
        <div id="side" class="col-md-4"> 
         <ul class="side-menu"> 
          <li><a href="#">Home</a></li> 
          <li><a href="#">Racconti</a></li> 
          <li><a href="#">Rubriche</a></li> 
          <li><a href="#">Pesce fritto e baccal&#224;</a></li> 
         </ul> 
        </div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

和CSS

.tot-header { 
    position: fixed; 
    top: 0px; 
    width: 100%; 
    text-align: center; 
} 

.navbar .navbar-nav { 
    display: inline-block; 
    float: none; 
    vertical-align: top; 
} 

.content { 
    padding-top: 10cm; 
}

但是填充似乎不起作用。有任何想法嗎？

來源

2016-02-25 RDGuida

你使用什麼瀏覽器？從我可以看到它似乎完美地工作。由於.content div的padding-top導致兩個div之間有巨大的空間。這是直到你的滾動，因爲你的頭頂有一個固定的位置。

這是你的代碼：

http://codepen.io/anon/pen/WweMPG?editors=1100

.tot-header { 
 
    position: fixed; 
 
    top: 0px; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 

 
.navbar .navbar-nav { 
 
    display: inline-block; 
 
    float: none; 
 
    vertical-align: top; 
 
} 
 

 
.content { 
 
    padding-top: 10cm; 
 
}

<div class="tot-header"> 
 
    <div class="page-header"> 
 
    <h1>Blogologo</h1> 
 
    </div> 
 
    <nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home</a></li> 
 
     <li><a href="#">Racconti</a></li> 
 
     <li><a href="#">Rubriche</a></li> 
 
     <li><a href="#">Pesce fritto e baccal&#224;</a></li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 
</div> 
 
<div class="content"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div id="central" class="col-md-8"> 
 
     Preview 
 
     </div> 
 
     <div id="side" class="col-md-4"> 
 
     <ul class="side-menu"> 
 
      <li><a href="#">Home</a></li> 
 
      <li><a href="#">Racconti</a></li> 
 
      <li><a href="#">Rubriche</a></li> 
 
      <li><a href="#">Pesce fritto e baccal&#224;</a></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

的代碼，在我看來完美地工作。你期望它看起來像什麼？

來源

2016-02-25 18:23:34

在你的CSS你可以嘗試使用像素而不是cm例如

.content { 
    padding-top: 100px; 
}

此外，你可以嘗試使用餘量，而不是填充，例如，

.content { 
    margin-top: 100px; 
}

，並給它，直到你的內容更多的填充或利潤率出現

來源

2016-02-25 18:25:11

刪除

position:fixed;

，改變你的。內容的CSS

從 padding-top:10cm;

到padding-top:10px;

來源

2016-02-25 18:45:37

填充不適用div

回答

相關問題