簡體   English   中英

底部的Bootstrap 3粘性頁腳和高度為100%的容器

[英]Bootstrap 3 sticky footer at the bottom and 100% height container with content

這是我的CSS規則:

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
}

使用此示例: http : //getbootstrap.com/examples/sticky-footer/

我可以毫無問題地設置頁腳,但是有一個問題。 如何使內容容器達到全高100%?

在此處輸入圖片說明

我想將此灰色背景色填充到頁腳中。 那怎么可能? 我已經花了8個小時來弄清楚。 請幫忙。

UPDATE

http://jsfiddle.net/3wh7d612/1/注意class container2 div,我想使其完全變高直到頁腳。

在更新的自適應CSS選擇器中,我最喜歡的絕對是vw(視口寬度)和vh(視口高度)。 以我的方式出現的許多Web設計都要求完整的頁面布局,其中不包含最大寬度,也不存在需要滾動查看的內容溢出。 這些設計還具有垂直框,當響應縮放時,無論瀏覽器的高度如何,垂直框都應同時在視口內可見。 在研究找到CSS解決方案時,我偶然發現了vh / vw單元。

也許你可以這樣使用

.content {         
min-height: 80vh;  // Define based on your needs
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM