CSS：包含div上的自動高度，包含div的背景div上的100％高度

問題是，我有一個內容div，它在高度方向上拉伸其容器（容器和內容div具有自動高度）。CSS：包含div上的自動高度，包含div的背景div上的100％高度

我想要背景容器，它是內容div的兄弟div來伸展以填充容器。背景容器包含div來將背景分解爲塊。

背景和容器div具有100％的寬度，內容容器沒有。

HTML：

<div id="container"> 
    <div id="content"> 
     Some long content here .. 
    </div> 
    <div id="backgroundContainer"> 
     <div id="someDivToShowABackground"/> 
     <div id="someDivToShowAnotherBackground"/> 
    </div> 
</div>

CSS：

#container { 
    height:auto; 
    width:100%; 
} 

#content { 
    height: auto; 
    width:500px; 
    margin-left:auto; 
    margin-right:auto; 
} 

#backgroundContainer { 
    height:100%;??? I want this to be the same height as container, but 100% makes it the height of the viewport. 
}

來源

2010-05-06 lukewm

您是否找到了解決此問題的解決方案？我有點陷入同樣的問題。 – 2012-03-18 21:05:17

設置百分比寬度時，它是父元素的百分比，而不是整個屏幕。唯一的例外是位於最上面的''元素。 – starbeamrainbowlabs 2012-07-29 08:46:27

某處你將需要設置一個固定的高度，而不是使用汽車隨處可見。你會發現，如果你在你的內容和/或容器上設置了一個固定的高度，那麼在它內部使用auto就可以工作。

而且，你的箱子仍然會擴大在高度上與更多的內容，即使你已經爲它的高度 - 所以不要擔心:)

#container { 
    height:500px; 
    min-height:500px; 
}

來源

2010-05-06 08:26:03 Tim

不幸的是，容器div不會根據div的高度來擴展。如果內容div包含使其擴展到600px高度的內容，則只會將容器div溢出，除非將容器div設置爲height：auto。 – lukewm 2010-05-06 10:50:20

感謝您的努力，還有其他想法？ – lukewm 2010-05-06 10:50:39

好了，所以有人可能打算給我這個答案，但我使用jQuery來解決我所有令人討厭的問題，事實證明，我今天只是用了一些東西來解決類似的問題。假設你使用jQuery：

$("#content").sibling("#backgroundContainer").css("height",$("#content").outerHeight());

這是未經測試的，但我認爲你可以在這裏看到這個概念。基本上在加載後，你可以得到高度（outerHeight包括填充+邊框，innerHeight僅用於內容）。希望有所幫助。

這裏是你如何綁定到窗口調整大小事件：

$(window).resize(function() { 
    $("#content").sibling("#backgroundContainer").css("height",$("#content").outerHeight()); 
});

來源

2010-05-06 08:26:49 Gabriel

如果JS關閉，該怎麼辦？ *拍打*：D會工作，但... – Tim 2010-05-06 12:20:19

AAAAAH！？他們可以關閉它？呵呵。 – Gabriel 2010-05-06 12:56:40

不幸的是，即使我對使用javascript感到滿意，如果在用戶使用javascript時頁面的動態變化，jquery腳本將不得不再次調用，而這只是要求不必要的複雜性。 – lukewm 2010-05-07 12:02:14

你不應該在任何時候設定height: 100%，如果你想你的容器以填充頁面。機會是，你的問題根源在於你沒有清理集裝箱的孩子的浮標。解決這個問題的方法有很多，主要是在容器中加入overflow: hidden。

#container { overflow: hidden; }

應該足以解決你遇到的任何問題的高度。

來源

2012-01-13 07:00:56 Wex

這是非常簡單的，它非常完美！ – Tom 2013-08-26 08:37:05

有許多解決方案，對於這個問題，包括OneTrueLayout技術，人造列技術，CSS表格顯示技術並且還有一個分層技術。

一種用於同樣高度-ED列的解決方案是CSS Tabular Display Technique這意味着使用顯示：表特徵。它適用於Firefox的2+，Safari 3及，歌劇院9+和IE8。

爲CSS以表格顯示的代碼：

的HTML

<div id="container"> 
    <div id="rowWraper" class="row"> 
      <div id="col1" class="col"> 
       Column 1<br />Lorem ipsum<br />ipsum lorem 
      </div> 
      <div id="col2" class="col"> 
       Column 2<br />Eco cologna duo est! 
      </div> 
      <div id="col3" class="col"> 
       Column 3 
      </div> 
     </div> 
</div>

的CSS

<style> 
#container{ 
    display:table; 
    background-color:#CCC; 
    margin:0 auto; 
} 

.row{ 
    display:table-row; 
} 

.col{ 
    display: table-cell; 
} 

#col1{ 
    background-color:#0CC; 
    width:200px; 
} 

#col2{ 
    background-color:#9F9; 
    width:300px; 
} 

#col3{ 
    background-color:#699; 
    width:200px; 
} 
</style>

即使有與自動一個問題它可以擴大表格單元的寬度通過在table-cell中插入另一個div並給定一個固定寬度來解決問題。無論如何，在使用非常長的單詞（我懷疑任何人會使用a，比方說600px長的單詞）或者某個div的寬度大於表格單元格寬度的情況下，寬度會發生過度膨脹。

Faux Column Technique是此問題最流行的解決方案，但它有一些缺點，例如，如果要調整列的大小並且它不是一個優雅的解決方案，則必須調整背景平鋪圖像的大小。

OneTrueLayout Technique包括創建一個極大高度的填充底部，並通過應用相同巨大值的負邊距底部將真實邊界位置置於「正常邏輯位置」並將其隱藏由溢出填充創建的範圍：隱藏應用於內容包裝。一個簡單的例子是：

HTML文件：

<html><head> 
<style> 
.wraper{ 
    background-color:#CCC; 
    overflow:hidden; 
} 

.floatLeft{ 
    float:left; 
} 

.block{ 
    padding-bottom:30000px; 
    margin-bottom:-30000px; 
    width:100px; 
    background-color:#06F; 
    border:#000 1px solid; 
} 
</style> 
</head> 
<body> 
    <div class="wraper"> 
    <div class="block floatLeft">first col</div> 
     <div class="block floatLeft"> 
       Second col<br />Break Line 
     </div> 
    <div class="block floatLeft">Third col</div> 
</div> 
</body> 
</html>

的分層技術必須是一個非常整潔的解決方案，涉及的div的withing主相對定位包裝DIV絕對定位。它基本上由許多子div和主div組成。主分區勢在必行位置：相對它的css屬性集合。這個div的孩子都是勢在必行位置：絕對。孩子們必須頂部和底部設置爲和左右尺寸設置，以適應每個另一列。例如，如果我們有兩列，一列寬100px，另一列200px，考慮到我們希望左側爲100px，右側爲200px，則左列必須有{left：0; right：200px} and right column {left：100px; }

在我看來，自動化高度容器內未實現的100％高度是一個主要缺點，W3C應考慮修改此屬性。

其他資源：link1，link2，link3，link4，link5 (important)

來源

2012-07-01 19:17:16

OneTrueLayout似乎無法工作，至少在Mac上使用Chrome 43：http://jsbin.com/mepucolagi/1/edit?html,output – 2015-05-23 02:38:33

讓#container到display:inline-block

#container { 
height:auto; 
width:100%; 
display:inline-block; 
} 

#content { 
height: auto; 
width:500px; 
margin-left:auto; 
margin-right:auto; 
} 

#backgroundContainer { 
height:200px; 200px is example, change to what you want 
width:100%; 
}

另見：W3Schools

來源

2012-07-29 08:35:54

我最終作出2顯示：表;

#container-tv { /* Tiled background */ 
    display:table; 
    width:100%; 
    background-image: url(images/back.jpg); 
    background-repeat: repeat; 
} 
#container-body-background { /* center column but not 100% width */ 
    display:table; 
    margin:0 auto; 
    background-image:url(images/middle-back.png); 
    background-repeat: repeat-y; 

}

這使得它有一個平鋪的背景圖像，中間的背景圖像作爲列。它延伸到100％頁面高度而不僅僅是瀏覽器窗口大小的100％

來源

2013-06-02 11:28:59 Gregws

只是一個簡短的說明，因爲我很難與此相關。

通過使用#container {overflow：hidden; }我已經開始在Firefox和IE中設置佈局問題了（當縮放會進出內容會從父div跳出和退出）。

解決此問題的方法是添加一個display：inline-block;與溢出相同的div：hidden;

來源

2013-08-21 03:59:37 imos

嘗試從樣式元素中排除高度。

即既不給身高：100％也不給任何其他值。

來源

2014-12-01 12:08:46 Vijay

{ 
    height:100vh; 
    width:100vw; 
}

來源

2015-03-15 04:14:07

CSS：包含div上的自動高度，包含div的背景div上的100％高度

回答

相關問題