填充內容背景直到它到達頁腳

我也有類似的問題，可以找到here。但是我不能讓它工作，或者我完全不瞭解它。填充內容背景直到它到達頁腳

我試圖解決的問題是 - 即使沒有足夠的內容顯示，我也希望我的內容背景能夠達到頁腳。我創建了一個簡單的小提琴，可以找到here。正如你所看到的，沒有足夠的內容可以達到頁腳，內容和頁腳之間有這個「藍色」空間。我想讓這個空間變成灰色。

HTML：

<div class=blue>header here</div> 
<p>LOGO here</p> 
<div class="blue">navigation bar here</div> 
    <div class="content"> 
No content. 
    </div> 
<div class="footer">footer is here</div>

CSS：

.blue { 
    color: #ffffff; 
    background-color: #294a70; 
    display: block; 
    float: none; 
    width: 400px; 
    margin: 0 auto; 
    text-align: center; 
} 
p { 
    text-align: center; 
    color: #ffffff; 
    } 
.content { 
    background-color: #e6e6e6; 
    display: block; 
    float: none; 
    margin: 0 auto; 
    overflow:hidden; 
    width:400px; 
    margin-bottom:30px; 
} 
.footer { 
    color: #ffffff; 
    background-color: #294a70; 
    display: block; 
    float: none; 
    width: 400px; 
    margin: 0 auto; 
    text-align: center; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height:30px; 
} 
body { 
    margin:0; 
    padding:0; 
    font-family: 'Open Sans', sans-serif; 
    line-height: 1.5; 
    font-size: 14px; 
    overflow-x:hidden; 
    background-image:url('http://www.planwallpaper.com/static/images/Alien_Ink_2560X1600_Abstract_Background_1.jpg'); 
    min-height: 100%; 
} 
html { 
    position:relative; 
    min-height: 100%; 
}

所有幫助將不勝感激！

來源

2017-04-05 RebelInc

使用CSS3 calc()功能

訣竅是，如果你知道頭&頁腳的高度，您可以使用該功能VH單位，100vh爲您提供了屏幕高度，只是。減去夏理&的高度頁腳從它。

E.g.

如果標題是80px &頁腳是40像素，即，總共120像素，然後使用

.content{ 
    min-height: calc(100vh - 120px); 
}

使用最小高度的目的是，如果內容不存在，則ATLEAST施加這個高度，但如果有比屏幕更多的內容，然後div被擴展以適應相應的內容。

更新的jsfiddle：

https://jsfiddle.net/vj07e8g1/5/

來源

2017-04-05 18:56:58 demonofthemist

我曾經在讀過關於vh單元的一些內容，但並不理解它們，你只是簡單地將它和我的例子設法在我的網站上實現它。所以謝謝你解決這個問題給我。 – RebelInc

-1

您可以添加到您的內容風格：

min-height:400px;

這將推動頁腳一點，但它會做的工作。

希望這是你在找什麼。

來源

2017-04-05 18:42:36

釷爲答覆，但它不會做這項工作。無論屏幕大小如何，我都需要擴展內容背景。 – RebelInc

-1

最簡單的現代方式，這取決於你的瀏覽器支持的要求，是使用CSS網格，它允許您定義的行和列，並指定特定內容是在特定的地方（位於由grid-row和grid-column），象如下：

html, 
 
body { 
 
    height: 100%; 
 
} 
 
/* to force all elements to be sized including 
 
    their padding and border-widths */ 
 
body, 
 
::before, 
 
::after { 
 
    box-sizing: border-content; 
 
} 
 

 
body { 
 
    /* To use CSS grid, forcing the child elements of 
 
    the <body> element to adopt 'display: grid-item': */ 
 
    display: grid; 
 

 
    /* defining the three columns of the grid, the first and 
 
    third being equal fractions of the space left over after 
 
    the second (middle) column's width of 400px is calculated */ 
 
    grid-template-columns: 1fr 400px 1fr; 
 

 
    /* reducing the first three rows to the minimum height needed 
 
    to fully display their content, setting the fourth row 
 
    to take up the remaining unoccupied space once the other 
 
    heights are calcuated and setting the final row's height to 
 
    30px: */ 
 
    grid-template-rows: min-content min-content min-content 1fr 30px; 
 
    height: 100vh; 
 
    background-image: url(https://i.stack.imgur.com/2oC8H.jpg); 
 
} 
 

 
body>* { 
 
    /* setting all the child elements of the <body> to be placed 
 
    in grid-column 2 (the central 400px-wide column): */ 
 
    grid-column: 2; 
 
} 
 

 
/* Setting the default shared styles of the .blue elements: */ 
 
.blue { 
 
    color: #ffffff; 
 
    background-color: #294a70; 
 
} 
 

 
.blue.header { 
 
    /* positioning this element in the first (one-based counting) 
 
    row: */ 
 
    grid-row: 1 
 
} 
 

 
body>p { 
 
    grid-row: 2; 
 
} 
 

 
.blue.navigation { 
 
    grid-row: 3; 
 
} 
 

 
div.content { 
 
    grid-row: 4; 
 
    /* background-color purely to show that the space of the 
 
    div.content element occupies the full space available: */ 
 
    background-color: #ffa; 
 
} 
 

 
div.footer { 
 
    grid-row: 5; 
 
}

<div class="header blue">header here</div> 
 
<p>LOGO here</p> 
 
<div class="blue navigation">navigation bar here</div> 
 
<div class="content"> 
 
    No content. 
 
</div> 
 
<div class="footer">footer is here</div>

JS Fiddle。

請注意，我確實爲.blue元素添加了一個類名，以便根據它們在文檔中的角色更輕鬆地區分它們，並在將它們放入文檔時將它們相互區分。

來源

2017-04-05 19:19:38

作爲網格佈局的堅定仇敵，我幾乎不把這稱爲最簡單的當代方式。意見無論如何。 Flexbox ftw加上它實際上是支持 – StefanBob

嗯，我不明白你對佈局技術的仇恨，它簡化了其他複雜的佈局創建，但是至少要花時間來解釋:)我選擇不去的原因flex-box是flex模型固有的一維方法（當然，兩維可以與嵌套一起使用），而網格提供簡單的（對於給定值的「簡單」）二維佈局。仍然：ymmv等:) :) –

你選擇使用CSS網格，因爲它在2方向上更好。但是這個佈局問題顯然是單向的：垂直的。嘿，每個人都有自己的想法，但引導程序混淆了類名和所有需要你的CSS網格答案的解釋，人們可能會理解我的仇恨是爲了使flexbox中的簡單變得複雜。他顯然不是經驗最豐富的編程人員，只是跳入CSS網格。你似乎很喜歡它，所以也許我會更深入地瞭解一下，但這不會很快得到支持http://caniuse.com/#feat=css-grid – StefanBob

你可以嘗試Flexbox的佈局來代替：

HTML

<body> 
    <header></header> 
    <main class="content"></main> 
    <footer></footer> 
</body>

CSS

body { 
    display: flex; 
    min-height: 100vh; 
    flex-direction: column; 
} 

main.content { 
    flex: 1; 
}

看看這個codepen例如：http://codepen.io/StefanBobrowski/pen/zZXXWy

來源

2017-04-05 19:23:39 StefanBob

填充內容背景直到它到達頁腳

回答

相關問題