爲什麼min-height不起作用？

所以這裏是獨家新聞。爲什麼min-height不起作用？

我有一個漸變應用於body元素的背景。然後我有一個容器（正文後面），它有一個背景.png圖像應用於它。漸變總是會擴展到至少100％的窗口高度，但容器（＃body2）不會。

任何建議爲什麼這不起作用？您可以檢查我的網頁在這裏的HTML：http://www.savedeth.com/parlours/

來源

2011-03-11 Dave

你使用什麼瀏覽器？ – Neal 2011-03-11 19:00:14

Firefox，safari，chrome。 – Dave 2011-03-11 19:02:48

整潔的外觀設計順便說一句 – wsanville 2011-03-11 19:12:14

-4

擰緊它。誰還沒有JavaScript呢？特別是對於這個人口。

<script type="text/javascript"> 
$(document).ready(function(){ 
if($("body").height() < $(window).height()){ 
    $("body").height($(window).height()); 
} 
}); 
</script>

來源

2011-03-11 20:25:17 Dave

那根本就沒有回答「爲什麼」 – 2014-03-07 15:18:46

+12

這只是不好使用JavaScript。你說你自己擰，但這不應該是事實上最好的辦法。不喜歡它有一個正確的答案thingy。 – Lodewijk 2014-06-07 01:05:37

在html，body和#body2要素（行1358）指定height: 100%。

html, body, #body2 
{ 
    height: 100%; 
    min-height: 100%; 
}

未在IE 6中測試，雖然工作在7。

來源

2011-03-11 19:08:06 wsanville

是的，適用於主頁，但不適用於「媒體」頁面或任何擴展超過100％的頁面。 – Dave 2011-03-11 19:17:19

拯救生命，謝謝！我甚至沒有想過把100％放在HTML元素上！？！ – jstafford 2012-04-03 05:06:26

對於你來說，這是另一個瘋狂的事實，只是在Chrome 30.0的最小案例中進行了測試：如果你用上面的方法創建了一個空白頁面，那麼只需使用'min-height：100％'添加'div'，'div'將伸展到「身體」的高度。如果你在第一個裏面添加另一個'div'，並嘗試'min-height：100％'，_it不會工作。你必須在包含子元素的每個級別傳播'height：100％'，這些子元素有望伸展到100％的高度（這就是爲什麼CSS樣式應用於_both_'html'和'body'）意思是'body'下的'div'。 – 2013-11-01 02:42:12

-3

東西是你的身體元素的高度設置爲320像素（如果你在Chrome看的檢查元素），因此100

％是320像素。這就是爲什麼它只顯示在頁面的頂部，並具有320像素高度的100％。

你必須設置最小高度的工作高度。

所以設置高度@ 100％一般應該可以工作。

來源

2011-03-11 19:08:48 Neal

不正確。您可以將HTML和body設置爲最小高度：100％填充窗口。所以如果你將下一個元素設置爲最小高度：100％，它應該填充父元素。此外，320像素來自內容，而不是任何CSS。 Chrome向您顯示「顯示」高度，而不是設置高度。 – Dave 2011-03-11 19:25:31

看@micheal copeland。同樣的道理。這是320px的來源 - 最大的元素 – Neal 2011-03-11 19:51:04

也許更好的問題是：當身高爲320px時，BODY的背景如何填充窗口。我們是否相信內容或背景？ – Dave 2011-03-11 20:06:38

您的最小高度設置爲100％，這隻會與填充空間的任何元素一樣高。用像素表示你的最小高度。另外請注意，IE6-需要它自己的一套規則。有關更多詳細信息，請參閱http://davidwalsh.name/cross-browser-css-min-height。

來源

2011-03-11 19:16:01

但我設置HTML和BODY標籤最小高度爲100％，以便將（和它，看看梯度）填充窗口的高度。 – Dave 2011-03-11 19:32:36

如果將背景圖片放在HTML和BODY標籤上，我認爲您嘗試實現的效果會更容易。在這種情況下，你不必指定任何高度。 – 2011-03-11 19:52:03

嘗試過，不行：/ – Dave 2011-03-11 20:24:32

position: absolute;作品在大多數情況下

來源

2013-09-11 14:20:15 harris

使用代替％VH爲我工作，而無需使用任何額外的技巧。

這是我有：

html, body, .wrapper { 
    min-height: 100vh; 
}

哪裏.wrapper是，您對容器/包裝或內容的主體，你想拉伸屏幕高度的全長的類。

這將按照您期望的那樣工作，當包裝內的內容少於或高於屏幕高度允許的值時。

這應該工作在most browsers。

來源

2016-07-13 00:27:21 Neceros

爲什麼min-height不起作用？

回答

相關問題