Question

为什么在以下示例中，内部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;，那么它看起来不错。但是，就我而言，我需要min-height。

Answer 1

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

min-height: inherit;

Answer 2

我相信这是您想要的输出：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包装器。

在chrome和firefox上测试过。

Answer 3

您要同时指定两者，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的最小div高度为100px。随着内部DIV的大小增加，包装器将自动扩展。我已通过向第一个内部style添加class属性来证明这一点。

<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>

Answer 4

我知道将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％...只是在思考......

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

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

4 个答案: