如果父div具有「min-height」，如何強制內部div的高度等於父div的高度？

爲什麼在下面的例子中，內部div的高度不像包裝的div？如果父div具有「min-height」，如何強制內部div的高度等於父div的高度？

HTML：

<div class="wrapper"> 
    <div class="inner">Hello</div> 
    <div class="inner">Peace</div> 
</div>

CSS：

.wrapper { 
    background-color: #000; 
    min-height: 100px; 
} 
.inner { 
    display: inline-block; 
    background-color: #777; 
    height: 100%; 
}

如果我改變min-height: 100px;到height: 100px;，那麼它看起來OK。但是，就我而言，我需要min-height。

來源

2011-05-04 Misha Moroshko

如果封裝的高度不是動態的，那麼爲什麼你需要使用％，當內可能只是具有相同的高度你指定的包裝。此外，如果內部是100％高，那麼如何讓他們中的兩個在包裝工作..？ – Marty 2011-05-04 07:03:32

感謝那個網站順便說一句Misha，這將是非常有用的:) – iain 2011-05-04 07:07:05

@iain：歡迎來到俱樂部:) – 2011-05-04 10:15:14

我相信這是你想要的輸出：http://jsfiddle.net/xhp7x/

.wrapper { 
    display: table; 
    background-color: #000; 
    height: 100px; 
    width: 100%; 
} 
.wrapper2 { 
    height: 100%; 
    display: table-row 
} 
.inner { 
    height: 100%; 
    display: inline-block; 
    background-color: #777; 
    margin-right: 10px; 
    vertical-align: top; 
}

不得不添加第二個DIV wrapper2。

在鉻和火狐上測試。

來源

2011-05-04 07:01:56 ariel

在你的例子中，包裝器沒有'min-height'。 – 2011-05-04 09:56:04

但它的行爲如此。短文本使包裝保持在100px，高長文本延伸到 – ariel 2011-05-04 09:57:08

OK ...但內包裝的高度小於包裝的高度。我希望他們是平等的。 – 2011-05-04 10:11:06

要指定兩者，CSS height不等於min-height。您想要指定height和min-height。

height =當作爲%使用，這是窗口高度
min-height的百分率爲你拖動窗口較小，具有%height的DIV將繼續減少，直到它擊中在min-height
max-height =當你拖動窗口較大，具有%height的DIV將繼續增加直到遇到max-height

http://jsfiddle.net/gpeKW/2/我和這裏的邊界增加了一個樣本。

對您的評論的答案做出輕微改變，您從原始CSS中看起來非常正確。

下面的HTML將具有100px的最小div高度。隨着內部DIV的大小增加，包裝將自動展開。我已經通過向第一個內部class添加style屬性來證明了這一點。

<html> 
<head> 
    <title>Untitled Page</title> 
    <style type="text/css"> 
     .wrapper 
     { 
      background-color: #000; 
      min-height:100px; 
     } 
     .inner 
     { 
      display: inline-block; 
      background-color: #777; 
      height: 100%; 
     } 
    </style> 
</head> 
<body> 
    <div class="wrapper"> 
     <div class="inner" style="height:200px">test</div> 
    <div class="inner">Peace</div> 
    </div> 
</body> 
</html>

來源

2011-05-04 07:05:59 iain

我試過，但如果你把高度的div不增長，如果內容如果大於100px，我想這是一個先決條件 – ariel 2011-05-04 07:10:41

這個例子不是一個好的例子 – sandeep 2011-05-04 07:24:20

在你的例子中，包裝div上沒有'min-height' 。 – 2011-05-04 10:04:28

我知道設置DIV孩子身高一樣其父DIV高度是使用相對父和絕對位置對孩子的一種方式。

.wrapper { 
    background-color: #000; 
    min-height: 100px; 
    position: relative; 
} 
.inner { 
    display: inline-block; 
    background-color: #777; 
    position: absolute; 
    height: 100%; 
}

但這種方式會造成一些問題，你必須調整的子元素，使其正確顯示

P/S：你爲什麼不把它設置爲相同的高度，其父母的高度？我的意思是，100％不是x％...只是想...

總之，快樂編碼;）

來源

2011-05-04 07:19:00

hm ..奇怪的是，它並沒有擴大高元素的高度http://jsfiddle.net/kBRVH/ – ariel 2011-05-04 07:30:20

http://jsfiddle.net/kBRVH/3/正如你所看到的，第一個與文本在黑色中，如果插入更多線條，則會溢出外部div，因爲外部div高100px，並且當其絕對位置的子女增加高度時，此高度不會增加。另一方面，第二個白色文本，插入更多的行，你會看到;） – 2011-05-04 07:45:45

在CSS某些屬性自動繼承父的價值，有些則沒有。最低高度必須在你想讓它繼承父的價值被明確指出：

min-height: inherit;

來源

2012-03-30 09:11:11 mystrdat

如果父div具有「min-height」，如何強制內部div的高度等於父div的高度？

回答

相關問題