页眉和页脚之间的内容 div 100% 高度答案

【问题标题】：Content div btween header and footer 100% height页眉和页脚之间的内容 div 100% 高度
【发布时间】：2019-08-11 20:04:37
【问题描述】：

我正在寻找一个解决方案，以解决我的中间内容 div（主要内容）不会针对响应式屏幕自动调整的问题 - 它会根据内容进行调整。

如果我将高度设置为 100%，它会沿着页面向下移动并且看不见。我不想将页脚粘贴到页面底部，因为我发现一旦我转到另一个屏幕尺寸，页脚仍保留在前一个屏幕的位置或内容在页脚下滚动。

我在下面列出了基本的 html 和 css。我很高兴找到脚本解决方案。

html, body {
    width: 100%;
    margin: 0;
    height: 100%;
    padding: 0 !important;
    font: normal 1.2rem "brandon-grotesque", arial, sans-serif;
    color: midnightblue;
}

#container {
    width: inherit;
    height: inherit;
    min-height: 100%;
    padding: 0;
    position: relative;
    display: flex;
    flex-flow: column;
}

#topbar {
    color: navy;
    width: 100%;
    text-align: right;
    font: normal 0.8rem "Droid Sans", arial, sans-serif;
    background-image: url("xxx");
    height: 50px;
    background-color: snow;
}

#logged {
    background: rgba(255,255,255,0.7);
    width: 16%;
    padding: 1.2rem;
    margin: 0;
    position: absolute;
    right: 0px;
    top: 0px;
    font-size: 70%;
}

#headerBar {
    margin: 0 auto;
    padding: 1rem;
    width: 70%;
}

#navigation {
    margin: 0;
    padding:1.5rem;
    width: 100%;
}
#content_upper {
    width: 100%;
    margin: 0 auto;
    padding: 0;
}
#main-content {
    clear: both;
    padding: 1% 3%;
    margin: 0 auto;
    background-color: #f9f9f9;
    height: 100%;
}
#footer {
    clear: both;
    bottom: 0px;
    width: 100%;
    display: inline-flex;
    padding: 2%;
    background-color: navy;
    min-height: 10%;
    color: white;
    font: normal 0.8rem "Droid Sans", arial, sans-serif;
}

<html>
<body>
   <container>
      <topbar></topbar>
      <logged></logged>
      <headbar></headbar>
      <navigation></navigation>
      <content_upper></content_upper>
      <main-content></main-content>
      <footer></footer>
   </container>
</body>
</html>

【问题讨论】：

标签： html css responsive

【解决方案1】：

尝试在页脚部分添加 top: 90%

#footer {
    clear: both;
    top: 90%;
    bottom: 0px;
    width: 100%;
    display: inline-flex;
    padding: 2%;
    background-color: navy;
    min-height: 10%;
    color: white;
    font: normal 0.8rem "Droid Sans", arial, sans-serif;
}

这应该使它位于页面顶部的 90% 处，它应该自动调整到您的其他页面

【讨论】：

谢谢保罗。我可以看到这是如何工作的。我确实在主容器上尝试了 flexi-grow，它已经解决了这个问题。非常感谢您的回答。这是一个很棒的论坛
没问题，很高兴你把它修好了！

【解决方案2】：

在#main-content 中，您需要将height: 100% 替换为flex-grow: 1。这样，#main-content 将占用最多的可用列空间。

#main-content {
  /* height: 100% */
  flex-grow: 1;
}

此外，如果没有 box-sizing: border-box，这些 #navigation 样式会导致水平滚动条。

#navigation {
  …
  padding:1.5rem;
  width: 100%;
}

为了解决这个问题，我添加了：

* {
  box-sizing: border-box;
}

演示

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  margin: 0;
  height: 100%;
  padding: 0 !important;
  font: normal 1.2rem "brandon-grotesque", arial, sans-serif;
  color: midnightblue;
}

#container {
  width: inherit;
  height: inherit;
  min-height: 100%;
  padding: 0;
  position: relative;
  display: flex;
  flex-flow: column;
}

#topbar {
  color: navy;
  width: 100%;
  text-align: right;
  font: normal 0.8rem "Droid Sans", arial, sans-serif;
  background-image: url("xxx");
  height: 50px;
  background-color: snow;
}

#logged {
  background: rgba(255, 255, 255, 0.7);
  width: 16%;
  padding: 1.2rem;
  margin: 0;
  position: absolute;
  right: 0px;
  top: 0px;
  font-size: 70%;
}

#headerBar {
  margin: 0 auto;
  padding: 1rem;
  width: 70%;
}

#navigation {
  margin: 0;
  padding: 1.5rem;
  width: 100%;
}

#content_upper {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

#main-content {
  clear: both;
  padding: 1% 3%;
  margin: 0 auto;
  background-color: #f9f9f9;
  flex-grow: 1;
}

#footer {
  clear: both;
  bottom: 0px;
  width: 100%;
  display: inline-flex;
  padding: 2%;
  background-color: navy;
  min-height: 10%;
  color: white;
  font: normal 0.8rem "Droid Sans", arial, sans-serif;
}

<html>

<body>
  <div id="container">
    <div id="topbar"></div>
    <div id="logged"></div>
    <div id="headbar"></div>
    <div id="navigation"></div>
    <div id="content_upper"></div>
    <div id="main-content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae magnam dolores
    </div>
    <div id="footer"></div>
  </div>
</body>

</html>

【讨论】：

谢谢安迪。 flexi-grow 绝对是我需要的。在所有浏览器中都可以完美运行。谢谢
@garvon-77 我很高兴。如果您能将我的答案标记为已选答案，我将不胜感激。