CSS - 100％高度超過100％？

我正在爲作者提供的 - 被移除的客戶端重新構建一個頁面（這是希伯來語，但這是無關緊要的）。
我遇到了頁腳的一些CSS問題（灰色背景） - 我想根據該框內的內容來適合灰色背景 - 所以如果列表增長，背景div的高度增加，並且如果列表縮小，那麼做背景。我知道這可以達到100％的高度，我知道這個概念的基礎知識。我知道父容器也必須設置爲100％高度，這樣背景就會伸展。
但是，如果您查看鏈接到的頁面上的頁腳以及它所在的2個容器，它會比應該放大得更遠（使用Web Developer Toolbar可以查看每個容器的高度）。此外，它的容器似乎設置在不同的高度，即使它們也應根據內容進行拉伸。
我曾嘗試將高度，最小高度，清晰度和定位設置無處不在 - 我無法讓它正常工作。
我知道整個「CSS 100％高度」問題很常見。相信我，我已閱讀過，而且我也在尋找有這個問題的人 - 但我什麼也沒找到。CSS - 100％高度超過100％？

來源

2011-08-10 Rick Anthony

您忘記了添加鏈接。此外，您的帖子中的幾條換行符會使其更具可讀性，並使您更有可能獲得幫助。 – daveyfaherty

我沒有忘記，因爲我的客戶我只是不想實際鏈接到它 - 請原諒我。此外 - 只是注意到我可以用HTML換行符。 –

啊，我知道那是怎麼回事。很高興你的問題解決了！ – daveyfaherty

填充，邊距和邊框不計算在高度和寬度中，因此每邊10px填充的元素的100％高度或寬度實際上會佔用100％加上20個像素。如果您使用邊距和邊框，請添加更多。

解決此問題的方法是使用CSS box-sizing:border-box;屬性，該屬性允許您切換框模型，以便考慮邊框和填充（邊框仍然保留在框外，因此如果您使用的是100％不要使用邊距）。

這有效地使盒模型的工作方式與舊的怪癖模式盒模型相同。

瞭解更多關於box-sizing功能在這裏：http://css-tricks.com/box-sizing/

box-sizing具有較好的跨瀏覽器支持，但要注意，它並沒有在IE7或以下工作，需要一些瀏覽器供應商前綴。

查看更多有關該瀏覽器支持瀏覽：http://caniuse.com/#search=box-sizing

來源

2011-08-10 10:21:52 Spudley

你是一個拯救生命的人，這一直讓我發瘋。當我前段時間閱讀了關於盒子大小的評估之後，我從來沒有真正想過使用它，因爲我擔心舊版瀏覽器中的兼容性問題。但我現在看到'盒子大小的確是我神祕的答案。另外，我不得不感謝@ItaiSagi的評論，因爲沒有'

'在我的'ul'後面，背景沒有伸展。歡呼你們倆。 –

@RickAnthony好的舊crossbrowser內部元素解決方案：http://jsfiddle.net/nrNyU/上面是問題，下面是解決方案。（也在代碼中。註釋行分隔。） – Joonas

@Lollero謝謝，這說明它非常好。不知道JSFiddle - 它肯定會派上用場。 –

這是胡亂猜測，因爲沒有聯繫。該div有填充？填充總是添加到div的高度，即使這個高度是100％。

來源

2011-08-10 10:24:47 daveyfaherty

不要那樣做自己... 只需清除它。

將<ul>浮動到左側或右側，並在父div的末尾添加<div style='clear:both'>。

Behatzlacha，ahi。

來源

2011-08-10 11:10:40

哈哈哈謝謝 –

CSS - 100％高度超過100％？

回答

相關問題