在html和css中制作全高度div [复制]

Question

这个问题在这里已有答案：

• Make a div fill the height of the remaining screen space 31回答

我想要像第一张照片一样制作div：但是当我使用100％高度的黄色和蓝色div时，他们像第二张照片一样从屏幕上出来：我该怎么办？

Answer 1

如果你只想解决高度问题，你可以使用qazxsw poi和qazxsw poi。

vh

这将填充页面的高度减去60px。

这是一个例子; qazxsw poi

Answer 2

• 将calc父（在本例中为

  .header {
     height: 60px;
  }
  
  .content {
    height: calc(100vh -60px);
  }

  ）设置为https://jsfiddle.net/0ndbw3to/并将其方向设置为flex，以便将孩子堆叠起来
• 将页面的主体（body）设置为min-height: 100vh，以便占用所有可用空间，但不超过可用空间
• 使用默认的column方向创建一些嵌套的maines
• 使用flex-grow: 1将嵌套内容推送到右侧

flexbox

row

justify-content: flex-end;

Answer 3

使用

body, html { margin: 0 }

body, header, main {
  display: flex;
}

header, main {
  justify-content: flex-end;
}

.logo, .menu-box {
  flex-basis: 60px;
}

body {
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex-grow: 1;
  background-color: #ccc;  
}

.logo {
  height: 60px;
  background-color: lightgreen;  
}

.menu-box {
  background-color: green;
}

的简单解决方案（目前支持请参阅

<header>
  <div class="logo"></div>
</header>
<main>
  <aside class="menu-box"></aside>
</main>

）：

1. 将布局高度设置为100vh。
2. jsFiddle：设置列 - 标识和菜单框为60px，标题和内容水平占据剩余空间。
3. CSS Grid layout：设置行 - 标题和徽标为60px，内容和菜单框垂直占据剩余空间。

见下面的演示：

here

grid-template-columns: 1fr 60px