拉伸內部div以匹配變量高度的容器。不可能？

我喜歡認爲我是一個相當不錯的...好吧，可以通過...... web開發人員。我已經建立了...... IDK，50個網站，具有大量的Flash和Javascript，以及一些數據庫支持的應用程序，並且做了足夠的圖形設計以便能夠勝任地僞造它:)拉伸內部div以匹配變量高度的容器。不可能？

I在我的職業生涯中遇到過這個問題六十次：當容器的高度可變時，如何將內部div設置爲包含div的100％高度？我知道你可以用Javascript或使用虛擬列來實現它，但是我發誓給狗狗，如果沒有辦法用純HTML/CSS來做，我會對生活和W3C很失望:(

看到，內部的div＃內容推的#container下來，我想粉部分，#shadow，是相同的高度＃內容通常情況下，當我進入這個運行。問題在於設計人員對網頁開發並不瞭解，並且使用了大量的陰影;只是假裝粉色部分是我需要沿#content的右邊緣延伸的陰影。

另外：是的，我知道你可以用C做滴眼液SS現在，甚至在一些黑客的IE瀏覽器，但在這種情況下，我有設計問題，阻止我這樣做。

沒有Javascript，這真的不可能嗎？ :(

如果IE6是什麼話題，你可以這樣做：

#shadow{ 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    width: 100px; 
    background: #F69; 
}

2011-10-27 20:53:04 topek

你是真棒。不能在我的XP/IE7虛擬機中工作，但我不在乎，它在IE8 +中工作:) – siliconrockstar

我認爲這沒有JavaScript是不可能的，但根據你所需要的，你可以使用這種東西：http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

2011-10-27 21:10:30

嗯...是的，這種類似於更多的混淆黑客，而不僅僅是使用JavaScript。感謝您的回覆，這是一篇非常有趣的文章。 – siliconrockstar

供粉。一個

#shadow{ 
    height: inherit; 
}

2011-10-27 21:22:36

似乎無法正常工作，我認爲是因爲您無法繼承未指定的高度。 – siliconrockstar

那麼有許多方法可以做到這最古老的一個存在使用大底填充和大的負面底部邊緣的解釋爲：http://www.alphapapahotel.com/equal-height-div-columns-100-percent/css/

但這種方式有它的缺點：你需要設置父母的元素溢出隱藏，使其工作。所以，如果你內在的絕對定位元素溢出它，你不能。另外如果區域內部「溢出：隱藏」 div有錨點（< a name =「first-paragraph」> </a >例如）div內的區域將被滾動，而不是頁面。

另一種方法是使用表格單元屬性：http://jsfiddle.net/8UPeR/。沒有在舊版瀏覽器中工作。

但是爲了將#content拉伸到＃高度的高度，就像使用僞元素（http://jsfiddle.net/PWMsz/1/）或「位置：絕對」一樣，topek的例子中有更簡單的方法。

2011-10-27 21:55:13

我在想，也許新的css3的東西將開始幫助：例如，

.container { display: box; box-align: stretch; box-orient: vertical; } 
.container div { box-flex: 1; }

（您可能需要-moz-和-webkit-前綴爲這個）

2011-10-27 22:37:02

回答