將高度 100% 設置為 div 會導致垂直滾動條

Question

正文中的 div 中只有 3 行文本。 背景顏色僅填充到那 3 行文本。

由於我希望顏色填充瀏覽器的 100% 垂直，我只是將 html 和 body 的 CSS height屬性設置為100% 。 但是垂直滾動條現在出現了。 如何隱藏/刪除它？

我嘗試了overflow:hidden為 html 以及 div 屬性，但沒有運氣。 使用火狐瀏覽器。

 * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } .logodiv { width: 100%; background-color: #243640; height: 40px; color: #FF1442; } .content { /* Firefox 3.6+ */ background: -moz-radial-gradient(circle, #1a82f7, #2F2727); width: 100%; height: 100%; overflow: hidden; }

 <div class="logodiv"> ITEMS LIST </div> <div class="content"> line1<br> line2 <br> line3 <br> </div>

Answer 1

改用min-height: 100%並向.content添加負邊距以將其向上移動：

.logodiv {
  position: relative;
  z-index: 10;
}

.content {
  background-color: gold;
  min-height:100%;
  margin-top: -40px;
}

.content:before {
  content: ' ';
  display: block;
  height: 40px;
}

JSBin 演示 #1

注意：為了下推.content元素的內容，我使用了::before偽元素選擇器，另一個選項可能是：

使用box-sizing: border-box和padding-top: 40px CSS 聲明：

.content {
  background-color: gold;
  min-height:100%;
  margin-top: -40px;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  padding-top: 40px;
}

JSBin 演示 #2

PS：如今，所有主要的現代瀏覽器都支持::before偽元素和/或box-sizing屬性。 但是如果你正在尋找所有瀏覽器都支持的傳統方式，你可以創建一個.spacer分區，作為.content元素的第一個子元素並設置height: 40px; 到.spacer 。

JSBin 演示 #3

Answer 2

使logodiv絕對定位：

http://jsfiddle.net/Gcduf/

.logodiv
{
    width:100%;
    background-color:#243640;
    height:40px;
    color:#FF1442;
    position: absolute;
    top: 0;
}

Answer 3

使用calc()函數。

對您的代碼進行此調整：

.content { height: calc(100% - 40px); }

 .logodiv { height: 40px; background-color: #243640; color: #FF1442; } .content { height: calc(100% - 40px); } body { height: 100vh; } * { margin: 0; padding: 0; }

 <div class="logodiv"> ITEMS LIST </div> <div class="content"> line1<br> line2 <br> line3 <br> </div>

---

你有.logodiv的height: 40px 。

和它的兄弟.content與height: 100% 。

將這兩個加在一起，它們會溢出容器（ body ）的高度。 這就是垂直滾動條的原因。

使用calc()函數，您可以使用加法 (+)、減法 (-)、乘法 (*) 和除法 (/) 作為分量值來設置數學表達式。