html – 如果父div具有“min-height”,如何强制内部div的高度等于父div的高度?

前端之家收集整理的这篇文章主要介绍了html – 如果父div具有“min-height”,如何强制内部div的高度等于父div的高度?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
为什么在下面的例子中,内部div的高度不像包装器的div?

Live demo here.

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%;
}

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

解决方法

我相信这是你想要的输出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包装器2.

在chrome和firefox上测试过.

猜你在找的HTML相关文章