如果父div具有“min-height”，如何强制内部div的高度等于父div的高度？

Why in the following example the height of the inner div is not like wrapper's div ?

为什么在下面的例子中，内部div的高度不像包装器的div？

现场演示。

HTML:

HTML：

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

CSS:

CSS：

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

If I change min-height: 100px; to height: 100px;, then it looks OK. But, in my case, I need min-height.

如果我改变最小高度：100px;高度：100px;，然后它看起来不错。但是，在我的情况下，我需要最小高度。

4 个解决方案

#1

I believe this is the output you want: http://jsfiddle.net/xhp7x/

我相信这是你想要的输出：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;
}

Had to add a second DIV wrapper2.

不得不添加第二个DIV包装器2。

Tested on chrome and firefox.

在chrome和firefox上测试过。

#2

Some properties in CSS inherit the value of the parent automatically, some don't. Minimum height must be explicitly stated when you want it to inherit the parent's value:

CSS中的某些属性会自动继承父级的值，有些则不会。如果希望它继承父项的值，则必须明确说明最小高度：

min-height: inherit;

#3

I know one way to set the div child height the same as its parent div height is to use relative for the parent and absolute position for the child.

我知道将div子高度设置为与其父div高度相同的一种方法是使用相对于父级和子级的绝对位置。

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

But this way will cause some problem, you have to adjust the child element so that it will be displayed properly

但是这种方式会导致一些问题，你必须调整子元素才能正确显示

P/s: Why don't you set it to the same height as its parent height? I mean, 100% is not x%... just thinking..

P / s：为什么不将它设置为与其父高度相同的高度？我的意思是，100％不是x％...只是在想......

Anyway, happy coding ;)

无论如何，快乐的编码;）

#4

You want to specify both, CSS height is not the same as min-height. You want to specify both height and min-height.

您要同时指定两者，CSS高度与min-height不同。您想要指定高度和最小高度。

height = When used as a %, this is a percent of the window height

height =当用作％时，这是窗口高度的百分比
min-height = as you drag the window smaller, the DIV with a % height will continue to reduce until it hits the min-height

min-height =当您将窗口拖得更小时，具有％高度的DIV将继续减小，直到它达到最小高度
max-height = as you drag the window larger, the DIV with a % height will continue to increase until it hits the max-height

max-height =当您将窗口拖得更大时，具有％高度的DIV将继续增加，直到达到最大高度

http://jsfiddle.net/gpeKW/2/ I've added a sample here with borders.

http://jsfiddle.net/gpeKW/2/我在这里添加了带边框的示例。

Slight change to the answer from your comment, you are pretty much correct from your original CSS.

从您的评论中稍微改变答案，您从原始CSS中获得的信息非常正确。

The below HTML will have a minimum div height of 100px. As the size of the inner DIV increases, the wrapper will automatically expand. I have demonstrated this by adding a style attribute to the first inner class.

以下HTML的最小div高度为100px。随着内部DIV的大小增加，包装器将自动扩展。我通过向第一个内部类添加一个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>

#1