时间戳

首页 > 解决方案 > 如何使子高度相对于其父高度-Css

html - 如何使子高度相对于其父高度-Css

问题描述

我有一个父 div，其高度是动态设置的，因此它可以根据用户设置进行更改。现在我里面有一个子 div，我想以这样的方式设置该 div 的内容，即随着父 div 高度的变化，内容应该仍然在定义的规范内。例如：我希望：padding: 40px 54px 54px;无论父级设置的高度是多少，都在子级 div 周围。

HTML：

<div class="parent" style="height:180px">
    <div class="child">
        <header>title</header>
        <div>test11</div>
        <button>
            Test
        </button>
        <button>
            Cancel
        </button>
    </div>
</div>

CSS：

.parent {
    max-height: 300px;
    margin: 0 auto;
    background-color: #fff;
    position: fixed;
    top: 20%;
    left: 20%;
    border: 1px solid #000;
    width: 234px;
}

.child {
    padding: 40px 54px 54px;
    height: 86px;
}

小提琴： https ://jsfiddle.net/5thk641u/15/

从上面的小提琴你可以看到，当我尝试将父类的高度从 更改为 时180px，250px底部填充增加，按钮到父 div 的距离也增加。我想要实现的是当我改变父级的高度时，子级div的高度相对增加，以便按钮和其他内容保持其填充。

我不确定这是否可以实现，对此有什么想法吗？

标签： htmlcss

解决方案

希望这是您正在寻找的

.child {
 padding: 40px 54px 54px;
 display:flex;
 height:100%;
 align-items:center;
 justify-content:center
 }

推荐阅读