让儿童div占据100％的高度

Question

我想让孩子div .status位于height 100%的{​​{1}}。

问题在于，我无法为.container div指定精确的height，因为它必须具有动态.container。

以下是JSFiddle

以下是代码：

＆＃13;

＆＃13;

height

＆＃13;

.container {
  width: 100%;
  background-color: red;
  float: left;
  box-sizing: border-box;
}
.progress {
  float: left;
  width: 5%;
  background-color: green;
  height: 100%;
  box-sizing: border-box;
  margin: 5px;
}
.content {
  float: left;
  width: 80%;
  background-color: #f2f2f2;
  height: 100%;
  box-sizing: border-box;
  margin: 5px;
}
.status {
  position: relative;
  float: left;
  width: 10%;
  background-color: #c2c2c2;
  height: 100%;
  box-sizing: border-box;
  margin: 5px;
}
.priority {
  position: relative;
  height: 20px;
  top: 5%;
  background-color: #a2a2a2;
}
.prog {
  position: absolute;
  width: 100%;
  height: 20px;
  bottom: 5px;
  background-color: #d2d2d2;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

Flexbox可以做到这一点。

* {
  box-sizing: border-box;
}
.container {
  width: 100%;
  background-color: red;
  display: flex;
}
.progress {
  width: 5%;
  background-color: green;
  margin: 5px;
}
.content {
  width: 80%;
  background-color: #f2f2f2;
  margin: 5px;
}
.status {
  position: relative;
  width: 10%;
  background-color: #c2c2c2;
  margin: 5px;
  display: flex;
  flex-direction: column;
}
.priority {
  position: relative;
  height: 20px;
  width: 100%;
  background-color: blue;
}
.prog {
  margin-top: auto;
  width: 100%;
  height: 20px;
  background-color: pink;
}

<div class="container">
  <div class="progress"></div>

  <div class="content">
    <h2>
   Some Content Text.... Some Content Text....Some Content Text....
   Some Content Text....Some Content Text....
   </h2>
  </div>

  <div class="status">
    <div class="priority"></div>

    <div class="prog"></div>
  </div>

</div>

Answer 2

适用于现代浏览器的选项＃1 - flexbox

您可以使用flexbox在父display:flex中.container和flex:2 .content删除所有position和{{}来实现这一目标1}}š

＆＃13;

＆＃13;

float

＆＃13;

*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0
}
.container {
  width: 100%;
  background-color: red;
  display: flex
}
.progress {
  width: 5%;
  background-color: green;
  margin: 5px;
}
.content {
  background-color: #f2f2f2;
  margin: 5px;
  flex: 2
}
.status {
  width: 10%;
  background-color: #c2c2c2;
  margin: 5px;
}
.priority {
  height: 20px;
  background-color: #a2a2a2;
}
.prog {
  height: 20px;
  background-color: #d2d2d2;
}

＆＃13;

＆＃13;

＆＃13;

旧版浏览器的选项＃2（IE9及以下版本） - CSS表格

使用<div class="container"> <div class="progress">&nbsp; </div> <div class="content"> <h2> Some Content Text.... Some Content Text....Some Content Text.... Some Content Text....Some Content Text.... </h2> </div> <div class="status"> <div class="priority"> </div> <div class="prog"> </div> </div> </div>

＆＃13;

＆＃13;

display:table/table-cell

＆＃13;

*,
*:before,
*:after {
  box-sizing: border-box;
}
body {
  margin: 0
}
.container {
  width: 100%;
  background-color: red;
  display: table;
  border-spacing: 5px
}
.container > div {
  display: table-cell;
  vertical-align: top
}
.progress {
  width: 5%;
  background-color: green;
}
.content {
  background-color: #f2f2f2;
}
.status {
  width: 10%;
  background-color: #c2c2c2
}
.priority {
  height: 20px;
  background-color: #a2a2a2
}
.prog {
  height: 20px;
  background-color: #d2d2d2
}

＆＃13;

＆＃13;

＆＃13;