身高：100％使用剩余高度？

Question

红色是标题。 然后我有5行，我想让每个20％的剩余空间使用。 但相反，它需要20％的窗口空间。如何解决这个问题？

HTML：

<div id="container">
    <div id="header"></div>
    <div id="items">
        <div class="item" id="item1"></div>
        <div class="item" id="item2"></div>
        <div class="item" id="item3"></div>
        <div class="item" id="item4"></div>
        <div class="item" id="item5"></div>
    </div>
</div>

的CSS：

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden; 
}

#container {
    position: relative;
    width: 100%;
    height: 100%;
}

#header {
    position: relative;
    width: 100%;
    height: 10%;
    background: red;
}

#items {
    position: relative;
    width: 100%;
    height: 100%;
}


.item {
    height: 20%;
    width: 100%;
}

#item1 {
    background: green;
}

#item2 {
    background: blue;
}

#item3 {
    background: orange;
}

#item4 {
    background: purple;
}

#item5 {
    background: brown;
}

http://jsfiddle.net/clankill3r/dabrm8js/

Answer 1

#items {
    position: relative;
    width: 100%;
    height: 90%;
}

标题占10％，所以你有90％的物品高度（而不是全部100％）......

Answer 2

您可以使用CSS表格执行此操作。

1）在容器上设置display:table并为其指定背景颜色（这将是标题的颜色）

2）在标题和项目

上设置display:table-row

FIDDLE

＆＃13;

＆＃13;

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}
#container {
  display: table;
  width: 100%;
  height: 100%;
  background: red;
}
#header {
  display: table-row;
  width: 100%;
  height: 40%;
}
#items {
  display: table-row;
  height: 100%;
}
.item {
  height: 20%;
  width: 100%;
}
#item1 {
  background: green;
}
#item2 {
  background: blue;
}
#item3 {
  background: orange;
}
#item4 {
  background: purple;
}
#item5 {
  background: brown;
}

＆＃13;

<div id="container">
  <div id="header"></div>
  <div id="items">
    <div class="item" id="item1"></div>
    <div class="item" id="item2"></div>
    <div class="item" id="item3"></div>
    <div class="item" id="item4"></div>
    <div class="item" id="item5"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

注意：如果CSS3是一个选项，也可以使用flexbox完成。

Answer 3

我为此使用弹性盒：

#container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#header {
  flex: 0 0 auto; /* fixed height */
  min-height: 10%;  /* you don't need this? */ 
}

#items {
  flex: 1 0 auto; /* take the remaining height (grow) */
  display: flex;
  flex-direction: column;
}

.item {
  flex: 1 1 auto; /* distribute height equally, 20% height for 5 rows, 25% for 4 etc. */
}

（test）

对于较旧的浏览器支持，您需要添加属性的前缀版本和旧属性（例如box-orient）

如果您可以忍受填充，边距和定位的限制，那么表格也可以完成工作

Answer 4

项目的高度需要为90％，因为标题部分已经使用了10％。