Question

我的容器占据了我页面高度的50％。这很好用。现在我需要在容器内部放置2个孩子：一个我不知道高度（根据内容的流体）和另一个应该占据容器剩余高度空间的孩子。

我知道这个CSS有一个奇怪的事情，因为当你有2个兄弟姐妹，你设置其中一个高度100％它没有考虑其他兄弟高度，而只是使用他们的父块的100％等级元素。这没关系：如果我把第一个孩子放在一个固定的高度，我就能找到解决办法。

我现在的问题是我的第一个孩子需要体液高度。我怎么能用CSS做到这一点？（我知道如何使用JS来修复它。来自.outerHeight）。

Pastebin - 修正＃1儿童示例的高度

Answer 1

在您的Pastebin中，我看到您使用过calc()。当您知道兄弟姐妹的身高时，它的效果很好。但是，当其他兄弟姐妹的高度未知或动态时，我会改用CSS Flexbox：

.flex {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.top {
  flex-shrink: 0;
}

.bottom {
  height: 100%; // 100% height of its container minus height of siblings
}

类别为bottom的元素将使用100％的高度减去其同级的高度。 flex-shrink: 0规则很重要，主要是对于iOS设备而言，以避免其他兄弟姐妹的缩水。它应该满足您对流体高度的需求。

Working example on Codepen here。

Answer 2

请尝试以下操作： DEMO

<强> HTML：

<div id="container">
    <div id="c1">
        <p>a</p>
        <p>bbb</p>
    </div>
    <div id="c2">ghgh</div>

<强> CSS：

#container {
    position: fixed;
    top: 0;
    left: 0;
    width: 400px;
    height: 50%;
    padding: 0;
    margin: 0;
    border: 1px solid red;
    display:table;
}
#c1 {
    height: 90px;
    background-color: #999;
}
#c2 {
    /*height: calc(100% - 90px);*/
    background-color: #f0f0f0;
    min-height:100%;
}
#c1, #c2 {
    display:table-row;
}

如何设置CSS高度：1个兄弟正确100％和其他兄弟的流体高度？

2 个答案: