固定父容器高度，子展開/被限制到父容器

我有很多父容器。在頁面上有很多這樣的實例。他們有不同的高度。固定父容器高度，子展開/被限制到父容器

這是資料覈實的層次：

.parent_container 
    |-----> .title 
    |-----> .content

.parent_container有一個固定高度 .title僞佔用一些高度的我想。內容採取了高度的休息...不佔據.title。

我該怎麼做呢？

目前我有這個，但因爲父容器是不同的高度，90％並不總是工作得很好，因爲.title總是由H2風格指定的特定高度。

有沒有在CSS中說「內容高度= parent_height - 標題高度」的方法？

/*just an example...different parent_containers have diff heights)*/ 
    .parent_container{ 
    height:530px; 
    } 

    .content { 
    height:90%; /* to make room for title */ 
    overflow:auto; /*show scrollbars*/ 
    }

來源

2010-11-18 milesmeow

在這種情況下，有一種方法可以使其工作，但您必須調整HTML和CSS。

的HTML變化：

.parent_container 
|-----> .content 
    |-----> .title 
    |-----> .scroll_container

標題進入裏面的內容。如果.content影響它們，您可能需要重寫.title中的某些樣式。

然後，將.content的高度設置爲100％。現在，您可能需要調整.title和.content上的CSS才能使其工作，具體取決於樣式，但它應該可行。將overflow: auto放在.content_scroller上，您將要從.content容器中刪除相同的樣式。 .content_scroller可以根據需要滾動內容，而.content容器可以是.parent_container高度的100％。

來源

2010-11-18 22:06:33

這不適合我。出於某種原因，我的.scroll_container內容超出了.parent_container的界限。這基本上就是我的CSS。 .parent_container {height：500px; } .content {height：100％;/*父母的100％* /} .scroll_container {overflow：auto; } （對不起...我不知道如何格式化評論） – milesmeow 2010-11-19 15:33:20

目前沒有用css計算的方法，雖然calc（）在工作中。有一個很大的觀點認爲，在css中進行計算雖然是嘔心狂的噩夢。但這不是主題。

一個快速解決方案是將放在.content中，並給內容100％的高度。節省您需要計算任何東西。

選項二是使用javascript來計算。

來源

2010-11-18 22:07:22

我想我可以回到我的固定計算並設置一個特定的％.scrolling_content將佔據其容器。 – milesmeow 2010-11-19 15:35:59

固定父容器高度，子展開/被限制到父容器

回答

相關問題