min-height：100％在html`div`弄傷頁腳

我想保持頁腳處於底部而不管頁面的高度。我已經能夠做到這一點，直到我爲背景添加了linear gradient。我需要在html div上添加min-height:100%;以填充整個頁面，其中包含linear gradient background color。但是現在我的頁腳在它下面有一些空白區域，並且它不完全在底部。min-height：100％在html`div`弄傷頁腳

在我的身高是足夠長的時間滾動到頁腳作品的權利底部的頁面..
其中高度是整個頁面無需滾動導航欄的頁面似乎有它的下方空間。它看起來像在頁腳之前的任何div之下都是粘在一起的。

html { 
 
    min-height: 100%; 
 
} 
 

 
body { 
 
    background: linear-gradient(45deg, rgb(51, 173, 255), rgb(128, 255, 212))no-repeat; 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 

 
#wrap { 
 
    min-height: 100%; 
 
} 
 

 
#main { 
 
    overflow: auto; 
 
    padding-bottom: 200px; 
 
} 
 

 

 
/* must be same height as the footer */ 
 

 
#footer { 
 
    position: relative; 
 
    margin-top: -200px; 
 
    /* negative value of footer height */ 
 
    height: 200px; 
 
    background-color: #484848; 
 
    opacity: 0.8; 
 
    width: 100%; 
 
    color: #fff; 
 
    clear: both; 
 
}

application.html.erb

<html> 
 

 
<body style="min-width:1100px;"> 
 

 

 

 
    <div id="header" style="min-width:1120px;"> 
 

 
    <% if content_for?(:navbar) %> 
 
     <%= yield(:navbar) %> 
 
     <% else %> 
 
      <%= render 'shared/navbar' %> 
 
      <% end %> 
 

 
    </div> 
 

 

 
    <div id="wrap"> 
 
    <div id="main"> 
 

 
     <%= render 'shared/message' %> 
 

 
     <%= yield %> 
 

 
    </div> 
 

 
    </div> 
 

 
    <div id="footer" style="min-width:1120px;"> 
 
    <%= render 'shared/footer' %> 
 

 
    </div> 
 

 
</body> 
 

 
</html>

來源

2017-04-19 Michael Lombardo

瞭解格式化你的代碼。它使故障排除/維護更容易。 –

你有代碼的例子嗎？你可以將編譯後的代碼發佈到我們可以看到它工作的地方嗎？ –

你可以改變你的CSS達到利用flexboxes？對這個職位接受的答案有使用flexboxes粘性頁腳的一個很好的例子： css calc and min-height can not team up properly

來源

2017-04-19 02:06:33 Rando

是的，我這樣做，但似乎仍然是同樣的問題..它只有當我在'body div'上面的'html div'上添加'min-height：100％：100％;'正常工作 –

你可以從html中刪除最小高度，並將背景圖像附加到html代替上面的body： background：linear-gradient（45deg，rgb（51，173，255），rgb（128,255,212））no-repeat ;; -webkit-background-size：cover; -moz-background-size：cover; -o-background-size：cover; background-size：cover; – Rando

當我這樣做的背景變成白色 –

我需要添加一個包裝#main具有最小高度設置爲自動。並將html divmin-height:100%;更換爲height:100%;。

html{ 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
body { 
 
    
 
    background: linear-gradient(45deg, rgb(51, 173, 255), rgb(128, 255, 212))no-repeat; 
 
    margin: 0; 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 100%; 
 
    height: 100%; 
 

 
} 
 

 
footer{ 
 
flex-shrink: 0; 
 
height: 200px; 
 
    background-color: #484848; 
 
    opacity: 0.8; 
 
    width:100%; 
 
    color:#fff; 
 
} 
 

 
#main { 
 
    background: linear-gradient(45deg, rgb(51, 173, 255), rgb(128, 255, 212))no-repeat; 
 
    min-height: auto; 
 
    flex-grow: 1; 
 
    flex-shrink: 0; 
 
    }

application.html.erb

<body style="min-width:1100px;"> 
 

 
    <div id="header" style="min-width:1120px;"> 
 

 
    <% if content_for?(:navbar) %> 
 
     <%= yield(:navbar) %> 
 
     <% else %> 
 
      <%= render 'shared/navbar' %> 
 
      <% end %> 
 

 
    </div> 
 

 

 
    <div id="main"> 
 

 

 
    <%= render 'shared/message' %> 
 

 
     <%= yield %> 
 

 

 
    </div> 
 

 

 
    <footer style="min-width:1120px;"> 
 
    <%= render 'shared/footer' %> 
 

 
    </footer> 
 

 
</body>

來源

2017-04-19 03:58:53

min-height：100％在html`div`弄傷頁腳

回答

相關問題