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

Posted 2023-02-23

【中文标题】如何使子高度相对于其父高度-Css

【英文标题】：How to make a child height relative to its parent height-Css

【发布时间】：2019-07-19 13:53:51

【问题描述】：

我有一个父 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的高度相对增加，以便按钮和其他内容保持其填充。

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

【问题讨论】：

嘿，你想要，当父 div 高度增加时，内部 div 应该垂直居中。？

CSS - Expand float child DIV height to parent's height的可能重复

@MohitGupta，是的，这是正确的，或者说不仅仅是中心，无论我提到什么填充，它都应该保持在这个范围内，并且不受父身高增加减少的影响

【参考方案1】：

子框在父框垂直居中。这是sn-p，

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

.child  /* No height, only verticaly centered */
  position: relative;
  padding: 40px 54px 54px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);

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

【参考方案2】：

我已经更新了代码，现在子 div 将是 vertically centre always，相应地是 parent div height。

Note：在全宽窗口中查看此页面。因为父 div 有你给的 position: fixed; css。 使用以下代码：

.parent 
    max-height: 300px;
    margin: 0 auto;
    background-color: #fff;
    position: fixed;
    top: 20%;
    left: 20%;
    border: 1px solid #000;
    width: 234px;
    display: flex;
    align-items: center;
    justify-content: center;
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: center;

.child 
  padding: 54px;
  height: auto;

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

【参考方案3】：

JsFiddle

.child 
    padding: 40px 54px 54px;
    height: inherit;
    box-sizing: border-box;

在.child 类中添加height:inherit 或height:100% 和box-sizing:border-box。高度继承/100% 将在您的子 div 中应用父高度。

JsFiddle (Your Code)

JsFiddle (My Code)

我在.parent 类中设置了height:280px（例如）。可以看到子类的背景色区域。我希望这个答案能解决你的问题。

【参考方案4】：

Hope this is what you are looking for

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

【讨论】：

感谢您的帮助，但我有点不希望孩子弯曲，内容下方的按钮和其他可能不需要弯曲的内容可能存在