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

发布时间：2020-12-14 18:34:21 所属栏目：资源来源：网络整理

导读：为什么在下面的例子中,内部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-b

为什么在下面的例子中,内部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上测试过.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!