HTML＆CSS：固定的位置，當沒有滾動條

我正在製作一個「固定頁腳塊（FF_BLOCK）」，一些內容和「背景圖塊（BG_BLOCK）」（也有一些內容）的網站模板，。HTML＆CSS：固定的位置，當沒有滾動條

當內容不多時，BG_BLOCK應該直接放在FF_BLOCK（position：fixed; bottom：0px）之上。我從來不想要FF_BLOCK和BG_BLOCK之間的差距。

當有很多內容（和滾動條）時，BG_BLOCK可以顯示爲現在的樣子。

這僅僅是可能的HTML + CSS，還是使用JS不可避免？

當前HTML

<div id="navigation">...</div> 
<div id="content">...</div> 
<div id="BG_BLOCK">...</div> 
<div id="FF_BLOCK">...</div>

當前CSS

#BG_BLOCK { 
background: url(../images/background.jpg) repeat-x top center; 
height: 380px; 
padding-top: 467px; 
margin-top: -347px; 
} 

#FF_BLOCK { 
position: fixed; 
bottom: 0px; 
}

看到這個圖片： enter image description here

來源

2013-04-03 screaming SiLENCE

請張貼您的代碼。 – Lowkase

好主意，我改變了問題 –

你試過min-height：？

BG_BLOCK { 
    min-height: 100%; 
}

我假設背景圖片足夠大。如果不是，則使用background-size: cover或background-size: auto 100%填充整個屏幕。

來源

2013-04-03 15:33:15

背景圖片在這裏不是問題，頂端是＃000，所以它只是水平重複。你可以用上面的代碼發佈一個例子嗎？我嘗試了BG_BLOCK的最小高度，沒有成功... –

好吧，我會試試這個，我找到了一個最小高度的例子，可以做到這一點... –

糟糕。對不起，我沒有回覆你的第一條評論，在過去的幾天裏很忙。 –

你已聲明FF_BLOCK（position：fixed）。因爲你的FF_BLOCK已經從正常頁面流中刪除了。使用最小高度和其他固定位置。

來源

2013-04-03 15:40:59 shubendrak

HTML＆CSS：固定的位置，當沒有滾動條

回答

相關問題