Question

我想知道如何使用HTML实现以下布局。

我不知道如何让蓝色div填满剩下的高度。

谢谢！

Answer 1

您可以使用averagingDouble和overflow: auto（将50px上的header更改为您想要的身高。）

body, html {
  margin: 0;
  padding: 0;
}

.element {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

header {
  height: 50px;
  background: #ED7D31;
}

.content {
  flex: 1;
  background: #5B9BD5;
  overflow: auto;
}

.inner {
  height: 1000px;
}

<div class="element">
  <header>Header</header>
  <div class="content">
    <div class="inner">Content HEre</div>
  </div>
</div>

使用calc()

的其他解决方案

body, html {
  margin: 0;
  padding: 0;
}

.element {
  height: 100vh;
}

header {
  height: 50px;
  background: #ED7D31;
}

.content {
  height: calc(100vh - 50px);
  background: #5B9BD5;
  overflow: auto;
}

.inner {
  height: 1000px;
}

<div class="element">
  <header>Header</header>
  <div class="content">
    <div class="inner">Content HEre</div>
  </div>
</div>

Answer 2

不确定这是否是你想要的，但看起来很容易：

HTML：

<html>
  <body>
    <header></header>
    <div></div>
  </body>
</html>

CSS：

html, body{
  height:100%;
}
header{
  height:200px;
  background-color:orange;
}
div{
  height:100%;
  background-color:blue;
}

https://jsfiddle.net/5umwj5j2/4/

所以基本上这个想法是蓝色div的高度100％意味着“使蓝色div与他的父亲一样高” - 但这就是为什么你需要为父母设置身高 - 在我的情况下，父亲是身体和身体父母是html。

如何在HTML中实现带有标题布局的滚动视图

2 个答案: