CSS 拉伸到 100% 高度答案

【问题标题】：CSS stretching to 100% HeightCSS 拉伸到 100% 高度
【发布时间】：2016-12-15 09:39:47
【问题描述】：

我正在尝试完成一些非常简单的事情。我糟糕的生锈 CSS 技能一点帮助都没有。

这是要实现的：

我做不到。如果我使用height: 100%，它可以在文本不多的情况下工作，但是当我添加大量 Lorem Ipsum 时，内容 div 会被拉伸，并且左侧菜单 div 不会随之缩放。

我不想使用 JavaScript，如果可能的话，就清理 CSS。

HTML：

<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="header">Header</div>
<div id="menu">Menu</div>
<div id="content">Content (paste a lot of lorem ipsum here and menu doesn't stretch)</div>
</body>
</html>

CSS

body
{
    margin: 0;
    height: 100%;
    background-color: gray;
}
#header
{
    height: 50px;
    background-color: white;
    border: 1px solid black;
}
#menu
{
    width: 225px;
    float: left;
    height: calc(100% - 50px);
    background-color: white;
    border: 1px solid black;
}
#content
{
    overflow: auto;
    background-color: white;
    border: 1px solid black;
}

【问题讨论】：

弹性盒子正是您想要的。 - css-tricks.com/snippets/css/a-guide-to-flexbox
其实并没有你想的那么简单，这是很多人提出的常见设计要求，不是直截了当或“开箱即用”
您想要的外观看似简单，但实际上并非如此。你问了很多浏览器。而且，高度 100% 不会像您认为的那样做：stackoverflow.com/questions/7880365/…。最后，您不想要 100% - 您想要 100% 减去标题的高度。

标签： html css

【解决方案1】：

Flexbox 可以做到这一点。

Codepen Demo

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  height: 50px;
  background: #bada55;
}
section {
  display: flex;
  flex: 1;
  background: #c0ffee;
}
aside {
  width: 150px;
  background: darkgoldenrod;
}
main {
  min-height: 100%;
  /*height: 2000px;*/  /* uncomment this to see difference */
  background: blue;
  flex: 1;
}

<header></header>
<section>
  <aside></aside>
  <main></main>
</section>

【讨论】：

这会一直延伸到浏览器窗口的底部吗？
会的。试试吧。请注意，我没有在 sicebar 上设置高度，或者主要内容不是min- height:100%。侧边栏始终根据主要部分的高度进行调整。
应该注意，这个代码示例不包括它们，但可能建议使用所有供应商前缀。以我的经验，它变得冗长，但有很好的浏览器支持除非你关心 IE9：caniuse.com/#search=flex
除非被要求，否则我不包括供应商前缀。用户可以自己搜索这些内容，但如有必要，可以通过查看编译后的 CSS 在 Codepen 中找到它们。

【解决方案2】：

尝试给出相对于视口高度的高度。 vh

   height:100vh;

【讨论】：

这行得通吗？你有演示它的小提琴吗？如果是这样，这是一个很好的解决方案。它是如何容纳页眉空间的？
内容很多，这不起作用 - jsfiddle.net/kysaws32/1