CSS html和body容器沒有伸展到內容的高度

我一直在閱讀大量的條目來弄清楚爲什麼我的內容不會強制body和html標籤伸展到內容內容高度的100％。CSS html和body容器沒有伸展到內容的高度

我的頁面在這裏：http://truerenaissance.devmu.com/artisthighlight/

你會看到背景圖像（在body標籤設置）沒有延伸到頁面或內容物的高度的100％。我只使用位置：無處不在。我還在內容的底部使用了'clearfix'。如果任何人有任何想法，爲什麼發生這種情況，我真的很感激它。

html, body { width: 100%; height: 100%; min-height: 100%; padding: 0px; margin: 0px; background: white; font-size: 12pt; font-family: 'Arial'; } 
#site-wrapper { width: 775px; height: 100%; min-height: 100%; margin: 0 auto; padding-bottom: 100px; background-color: rgba(255,255,255,.75); 
     padding: 0px; z-index: 10; } 
#site-wrapper .inner { min-height: 100%; padding: 20px 20px 40px 24px; } 
.clear:before, 
.clear:after { 
    content:""; 
    display:table; 
} 
.clear:after { 
    clear:both; 
} 
.fixer { display:block;clear:both;overflow:hidden;width:auto;height:0px;line-height:1px;font-size:1px; } 

<html> 
    <body> 
    <div id="body-wrapper"> 
     <div id="site-wrapper"> 
     <div class="inner"> 
     </div> 
     </div> 
    </div> 
    </body> 
</html>

謝謝！

來源

2014-04-03 Ryan Weiss

你想保持背景圖像的固定？ – James

我只是希望背景適合寬度，完全無論screeen的大小是什麼（這是現在的工作），然後我想背景圖像是全高（不一定是頁面，但至少是本身），因爲我在這裏使用的背景圖片可能不會拉伸這個頁面的整個高度。我計劃在這種情況下編輯背景圖像以淡化底部。我還需要背景容器（本例中的主體）伸展到頁面的100％）。 –

在這種情況下，請刪除'＃site-wrapper'的'height：100％'！ – James

好吧，您將身高限制在視口高度，並且您沒有垂直拉伸背景。刪除height: 100%從html和body並使用background-size的cover的值。

感謝您的大屁股圖片。

來源

2014-04-03 16:56:07 MatTheCat

哇，沒有意識到高度：100％只能到視口的高度。每天學點東西。感謝諷刺評論。 –

還有一個問題剛剛出現在這裏。我發佈的原始頁面正在工作，背景（body/html）在刪除高度後延伸：100％;但是，現在，在後續頁面上，如果內容不適合頁面的整個高度，背景（body/html）不會延伸到整個頁面（因爲我刪除了高度：100％）。無論如何，只有當內容本身沒有伸展時，才能將背景拉伸到視口的整個高度。我也想讓它在原來的情況下工作，在這種情況下，背景會伸展到內容高度。這可能嗎？ –

這裏是有問題的頁面：原文：http://truerenaissance.devmu.com/artisthighlight/ 其他頁面內容很短：http://truerenaissance.devmu.com/about/ –

CSS html和body容器沒有伸展到內容的高度

回答

相關問題