在html和css中制作全高div [重复]答案

【问题标题】：make full height div in html and css [duplicate]在html和css中制作全高div [重复]
【发布时间】：2019-07-24 17:37:15
【问题描述】：

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

【问题讨论】：

你能发布你的css/html吗？看起来您正在使用一些填充或边距将所有内容向下推 60 像素。通过这样做，您需要填充的屏幕剩余高度不再是 100%。
当您使用百分比值时，您必须确保包装 div 具有非百分比值才能使其工作。还请包括您的 HTML 和 CSS 代码。
简短回答：您始终可以使用 css calc 函数，例如您可以使用的标题 (width:calc(100%-60px); 等等
还有一件事，您可以使用顶部标题的固定位置并使其全宽并从侧面填充，以将徽标放在具有更高 z-index 的新层中；）

标签： html css

【解决方案1】：

一个使用CSS Grid layout的简单解决方案（有关当前支持，请参阅here）：

设置布局高度为100vh。
grid-template-columns: 1fr 60px：将列 - logo 和 菜单框 设置为 60px，header 和 content 将剩余的空间 横向取走。
grid-template-rows: 60px 1fr：设置行 - header 和 logo 为 60px，content 和 菜单框 剩余空间垂直。

请看下面的演示：

body {
  margin: 0; /* remove the default browser margin */
}
.wrapper {
  display: grid;
  grid-template-columns: 1fr 60px; /* set the columns */
  grid-template-rows: 60px 1fr; /* set the rows */
  height: 100vh; /* set the height of the layout */
}

/* presentation styles */
.wrapper>*{border:1px solid}.header{background:#00f}.logo{background:orange}.content{background:#f0f8ff}.aside{background:grey}

<div class="wrapper">
  <div class="header"></div>
  <div class="logo"></div>
  <div class="content"></div>
  <div class="aside"></div>
</div>

【讨论】：

【解决方案2】：

将flex 父级（在本例中为body）设置为min-height: 100vh，并将其方向设置为column，以便子级堆栈
将页面正文 (main) 设置为 flex-grow: 1，以便它占用所有可用空间，但不超过可用空间
使用默认的row方向创建几个嵌套的flexboxes
使用justify-content: flex-end; 将嵌套内容推到右侧

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>

jsFiddle

【讨论】：

【解决方案3】：

如果您只是想解决高问题，可以使用 vh 与 calc 结合使用。

.header {
   height: 60px;
}

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

这将填充页面高度减去 60 像素。

这是一个例子； https://jsfiddle.net/0ndbw3to/

【讨论】：

如果.header 比60px 高怎么办？另外，logo box 和 menu box 呢？
是的，完全是@AndyHoffman，如果是这样的话，那么它就需要更新了。