两个div - 一个固定高度，另一个填充剩余空间

Question

我有两个div：一个具有静态高度，另一个用于填充父级的其余空间。父div获得动态高度。在示例中，我将其设置为100px，但它可以是200px或300px。 green部分溢出blue父部分。我添加了保证金只是为了显示泄漏。我希望它只能填充，直到父界限并且不想要任何滚动条。我不知道如何摆脱这个15px走出父母界限。感谢这里的任何帮助。

＆＃13;

＆＃13;

.container {
  width: 100%;
  height: 100px;
  background: blue;
  position: relative;
}

.child1 {
  position: absolute;
  top: 0;
  height: 15px;
  width: 100%;
  background: red;
}

.child2 {
  position: absolute;
  top: 15px;
  height: 100%;
  width: 100%;
  margin-left: 5px;
  background: green;
}

＆＃13;

<div class="container">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

请使用flexbox

＆＃13;

＆＃13;

.p {
  display: flex;
  flex-direction: column;
  min-height: 150px;
  border: 1px solid red;
}

.c {
  height: 15px;
  background-color: yellow;
}

.d {
  flex-grow: 1;
  background-color: green;
}

＆＃13;

<div class='p'>
    <div class=c></div>
    <div class=d>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error officia, perferendis sed ipsam quae illo voluptas voluptate, obcaecati pariatuLorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

定义child2的高度和宽度，如下所示：

height: calc(100% - 15px);
width: calc(100% - 5px);

＆＃13;

＆＃13;

.container {
  width: 100%;
  height: 100px;
  background: blue;
  position: relative;
}

.child1 {
  position: absolute;
  top: 0;
  height: 15px;
  width: 100%;
  background: red;
}

.child2 {
  position: absolute;
  top: 15px;
  height: calc(100% - 15px);
  width: calc(100% - 5px);
  margin-left: 5px;
  background: green;
}

＆＃13;

<div class="container">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用顶部/左侧/右侧/底部值使框填充父级而不是使用width: 100%; height: 100%; margin-left: 5px

<div style="width: 100%; height: 100px; background: blue; position: relative;">
  <div style="position: absolute; top: 0px; height: 15px; width: 100%; background: red"></div>
  <div style="position: absolute; top: 15px; bottom: 0; left: 5px; right: 0; background: green"></div>
</div>

Answer 4

不确定我是否能解决您的问题，但这是我的尝试：

<div style="width: 100%; height: 100px; background: blue; position: relative; overflow:hidden">
    <div style="position: absolute; top: 0px; height: 15px; width: 100%; background: red"></div>
    <div style="position: absolute; top: 15px; height: 100%; width: 100%; margin-left: 5px;background: green"></div>
</div>

Answer 5

希望这有帮助

＆＃13;

＆＃13;

.container {
  width: 100%;
  height: 100px;
  background: blue;
  position: relative;
}

.child1 {
  position: absolute;
  top: 0;
  height: 15px;
  width: 100%;
  background: red;
}

.child2 {
  position: static; //browser default position is static no need
  top: 15px;
  height: 100%;
  width: 100%;
  margin-left: 5px;
  background: green;
}

＆＃13;

<div class="container">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

＆＃13;

＆＃13;

＆＃13;