固定大小的页眉和页脚之间具有最小高度的全尺寸 div答案

【问题标题】：Full-size div with min-height between fixed size header and footer固定大小的页眉和页脚之间具有最小高度的全尺寸 div
【发布时间】：2017-01-24 03:33:05
【问题描述】：

我正在尝试设置一个网页，但由于元素的高度，我快疯了。特别是我想要的布局是：

顶部有一个固定高度（例如 150 像素）和 100% 宽度的标题。
在标题下，我需要两列。左列具有固定宽度（例如 40px），右列与窗口一样大。两列都有最小高度（例如，600 像素，两列相同），但如果有足够的空间，它们必须填满整个窗口，直到页脚。
页面底部的页脚。它位于列下方（不得重叠！）并具有固定高度（例如 50 像素）。

我尝试了几种模式，但还没有找到一种可行的模式。有时我最终将页脚叠加在列上，有时列不会填满所有可用空间。我认为主要问题是最小高度要求，因为没有它问题就相当简单了。我知道 CSS 属性 min-height，但仍然找不到方法。

这是我的代码（无法正常工作，右栏变得太大，页脚甚至不显示）。

header{
    height: 40px;
    width: 100%;
    background-color: darkgoldenrod;
    text-align: center;
}

footer{
    background-color: grey;
    height: 50px;
    width: 100%;
    text-align: center;
}

#container{
    position: relative;
    width: 100%;
    min-height: 200px;
    background-color: red;
    margin-bottom: -100px;
    padding-bottom: 100px;
}

#toolbar{
    background-color: white;
    position: absolute;
    left: 0;
    width: 80px;
    height: 100%;
}

#drawbox{
    background-color: yellow;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 80px;
}

<!DOCTYPE html>
<html>
<head>
<title>BLOCKS</title>
<link rel="stylesheet" type="text/css" href="blocchi.css">
</head>
    
<body>
<header>
    <h2>HEADER</h3>
</header>

<div id="container">
    <aside id="toolbar">TOOLBAR</aside>
    <div id="drawbox">DRAWBOX</div>
</div>  
<footer>
    <p>FOOTER</p>
</footer>
</body>
</html>

你能帮帮我吗？提前致谢！

编辑：如果可能的话，我想要一个不涉及 CSS3 属性和异国情调的答案，因为我正在尝试了解简单的事情是如何工作的。我很确定解决方案是“div”、“position”、“height”和类似内容的组合！

【问题讨论】：

发布您正在尝试的当前 HTML 和 CSS。
@Atrix 完成了，尽管它并没有明显工作。

标签： html css

【解决方案1】：

使用弹性框。让外部容器（页眉、主要区域、页脚）成为带有max-height: 100vh; 的弹性列。然后将主区域设置为最小高度为 600 像素或其他任何值的正常 flex 布局，并通过flex-grow: 1; 将主内容区域（侧边栏旁边）设置为增加所有可用空间。然后当你向主区域添加内容时，它会增长到100vh 并向下推页脚，然后页脚将位于页面底部，你可以通过@使主区域（侧边栏和主要内容）滚动987654324@

*{margin:0;padding:0;box-sizing:border-box;}
header,footer {
  height: 50px;
  background: black;
  color: white;
}
.flex {
  display: flex;
}
.vert {
  flex-direction: column;
}
.container {
  max-height: 100vh;
}
section {
  min-height: 200px;
}
aside {
  background: #ccc;
  width: 100px;
}
main {
  flex-grow: 1;
  background: #eee;
}
.scroll {
  overflow-y: auto;
}

<div class="flex vert container">
  <header>header</header>
  <section class="flex">
    <aside class="scroll"><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p><p>aside</p></aside>
    <main class="scroll"><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p></main>
  </section>
  <footer>footer</footer>
</div>

【讨论】：

感谢您的回答！ flex 是唯一的方法吗？我很确定只使用“位置”、“最小高度”、“div”和类似的标准东西就可以解决它，而不需要 CSS3。
@leoll2 您可以使用display: table; 或绝对定位的元素来实现。使用 flexbox 和 CSS3 的反感是什么？如果您有特定的技术要求，请务必将它们放在您的帖子中，这样我就不会浪费您和我的时间来解决不起作用的解决方案。顺便说一句，这不是“异国情调”。 Flexbox 不是任何高级 CSS3 或任何东西——它是一个标准的显示属性。就像display: table;。没有理由你不应该学习或使用它。

【解决方案2】：

我也建议使用 flexbox，唯一的区别是粘页脚而不是滚动溢出：

底部没有内容溢出的页脚：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}
.wrapper {
  width: 100%;
  min-height: calc(100% - 50px);
  display: flex;
  flex-flow: column wrap;
}
header {
  height: 40px;
  background-color: darkgoldenrod;
  text-align: center;
}
#container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  flex: 1;
  background-color: red;
}
#toolbar {
  background-color: white;
  width: 80px;
}
#drawbox {
  background-color: yellow;
  flex: 1;
}
footer {
  background-color: grey;
  height: 50px;
  width: 100%;
  text-align: center;
}

<div class="wrapper">
  <header>
    <h2>HEADER</h2>
  </header>
  <div id="container">
    <aside id="toolbar">TOOLBAR</aside>
    <div id="drawbox">DRAWBOX</div>
  </div>
</div>
<footer>
  <p>FOOTER</p>
</footer>

页脚在内容溢出时下压：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}
.wrapper {
  width: 100%;
  min-height: calc(100% - 50px);
  display: flex;
  flex-flow: column wrap;
}
header {
  height: 40px;
  background-color: darkgoldenrod;
  text-align: center;
}
#container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  flex: 1;
  background-color: red;
}
#toolbar {
  background-color: white;
  width: 80px;
}
#drawbox {
  background-color: yellow;
  flex: 1;
}
footer {
  background-color: grey;
  height: 50px;
  width: 100%;
  text-align: center;
}

<div class="wrapper">
  <header>
    <h2>HEADER</h2>
  </header>
  <div id="container">
    <aside id="toolbar">TOOLBAR</aside>
    <div id="drawbox">DRAWBOX
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
    </div>
  </div>
</div>
<footer>
  <p>FOOTER</p>
</footer>

【讨论】：