Question

使用最新的CSS是否可以获得灵活的高度div（a）和div（b），以延伸填充页面？

以下内容：

div.a { height: calc(100% - div.a.height); }

＆＃13;

body {
  background-color: #FEFEFE;
}
div {
  padding: 20px;
  margin: 10px;
  border: 4px solid black;
  width: 100px
}
div.a {
  background-color: #278dae;
}
div.b {
  background-color: #409b24;
  /*height: calc(100% - div.a.height);   <-- this */
}

＆＃13;

<body>
  <div class="a">a</div>
  <div class="b">b</div>
</body>

＆＃13;

Answer 1

Flexbox可以做到这一点：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
body {
  background-color: #FEFEFE;
  display: flex;
  flex-direction: column;
}
div {
  padding: 20px;
  margin: 10px;
  border: 4px solid black;
  width: 100px
}
div.a {
  background-color: #278dae;
}
div.b {
  flex: 1;
  background-color: #409b24;
}

<body>
  <div class="a">a</div>
  <div class="b">b</div>
</body>

将第二个div的高度填充到页面的100％（纯css）

1 个答案: