如果父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的高度？

回答

相关问题