CSS - div的高度= 100％，-20px

好的，所以我讀過一些其他人有這個問題，但他們要麼訴諸JS或解決方案不會爲我工作。CSS - div的高度= 100％，-20px

我有這樣的：

// The Header // 
/*   */ 
/* CONTENT */ 
/*   */ 
// The footer //

目前正在進行的工作，可以在這裏找到：
http://newsite.carlsimmons.co.uk/

它的工作如預期，除了總是存在垂直滾動條。這是因爲內容的高度設置爲100％，頁眉高度爲&，您留下的內容總是比頁面大。

我已經嘗試了絕對的選擇（在其他很多人中），但他們都有錯誤或不工作。只是想一定有辦法實現這一點肯定？我想我不應該太害怕使用JS，因爲對於使用JS的人來說它仍然很好，但不是很好的做法，並且可能會導致瀏覽器調整大小上的一些滯後。

來源

2011-11-09 Mr Carl

我想你可以在這裏找到一些想法： http://ryanfait.com/sticky-footer/ – biziclop

爲什麼內容區域必須是100％？ – Jrod

@biziclop我試過這個，但我有不同的設置。 –

您可以使用calc(100% -20px)

http://www.w3.org/TR/css3-values/#calc

但現在它的唯一的Firefox兼容 http://hacks.mozilla.org/2010/06/css3-calc/

編輯：IE 9是實現計算的第一大瀏覽器（）（CF安迪·E公司的評論）

來源

2011-11-09 17:05:22 DoubleYo

*'它只與Firefox兼容'* - 這可能會讓您感到驚訝，但IE 9是第一個實現'calc（）'的主要瀏覽器。 –

哈哈，是的，當我讀到這個時感到驚訝：P我想我必須要用上面的解決方案。希望webkit有一天會把它拿起來，在那裏我們走，漸進式增強：P花了大約5個小時來處理這個令人頭疼的事情之後，有時間意識到我的情況並不是一個完美的解決方案。 –

現在它與所有主流瀏覽器兼容http://caniuse.com/#feat=calc – DoubleYo

如果您使用粘性頁腳，則不會得到更大的頁面。

一個可能的解決方案：

.wrapper { 
min-height: 100%; 
height: auto; 
height: 100%; 
margin: 0 auto -4em; 
} 
.footer, .push { 
height: 4em; 
}

還有一句：

html, body {height: 100%;} 

#wrap {min-height: 100%;} 

#main {overflow:auto; 
    padding-bottom: 150px;} /* must be same height as the footer */ 

#footer {position: relative; 
    margin-top: -150px; /* negative value of footer height */ 
    height: 150px; 
    clear:both;}

來源

2011-11-09 17:09:15 Yisela

這通常會起作用，但我有一個標題，它將內容部分（100％高度）向下推。 –

給你的頁眉和頁腳的絕對位置，並分別給你的身體上下頁邊距等於你的頁眉和頁腳的高度：

body { 
    margin: 70px 0 110px; 
} 
body > header { 
    position: absolute; 
    top: 0; 
} 
body > footer { 
    position: absolute; 
    bottom: 0; 
}

來源

2011-11-09 17:13:09 gilly3

你沒有解釋爲什麼絕對位置i ng還沒有爲你工作。沒有JavaScript，擁有固定/絕對位置是唯一的出路。這是我爲了讓它爲我工作所做的。

基本上你有你的頁腳的東西你的頁腳。然後你有一個墊片，以防止身體完全隱藏在它後面。

如果你想要一個固定的頭部，你可以做同樣的事情 - 修正的真正頭部和頭部間隔。

然後刪除內容高度，因爲您不再需要它了。

HTML：

<div class="footer_spacer">&nbsp;</div> 
<div class="footer"> 
    footer content 
</div>

CSS：

.footer 
{ 
    bottom:   0; 
    position:   fixed; 
    width:   100%; 
    z-index:   1000; 
} 

.footer_spacer 
{ 
    height: 25px; /* you need to make this the same height as the footer */ 
}

來源

2011-11-09 17:14:18 evan

或者你可以設置你的包裝/身體的填充/邊距，而不是我想象的footer_spacer。可悲的是，這對我不起作用。 –

絕對不適合我，因爲如果我將所有內容設置正確（afaik），那麼內容部分可以變得非常小以至於不再包裝實際內容（它的孩子）。固定只是提供頁面底部的草，而不管滾動位置，這很奇怪。 –

「草底」是大多數桌面應用程序的工作原理，包括直到去年的瀏覽器 - 稱爲狀態欄。你也可以在Facebook和其他網站上看到它。如果不符合no javascript要求，則可以在滾動條到達頁面底部時顯示頁腳。 – evan

您也可以嘗試使用box-sizing屬性：

height: 100% 
padding: 20px 0; 
-moz-box-sizing: padding-box; 
    box-sizing: padding-box;

https://developer.mozilla.org/en/CSS/box-sizing

小號由理智的瀏覽器和IE8 +支持。

來源

2011-11-09 20:33:57 biziclop

CSS - div的高度= 100％，-20px

回答

相關問題