与页眉和页脚 div 重叠的中间内容答案

【问题标题】：Overlapping middle contents with header and footer divs与页眉和页脚 div 重叠的中间内容
【发布时间】：2019-10-02 14:18:34
【问题描述】：

这是我试图解决这个问题的一个小提琴： http://jsfiddle.net/BPJxD/1/

使用顶部、中间和底部的标记，问题是：

1- 如您所见，尽管在页脚 div 上有 position:absolute 和 bottom:0px，但黑色的页脚并不真正位于页面底部

2- 更重要的是，leftSection、middleSection 和 rightSection DIV 与页眉和页脚 DIV 重叠，事实上，在这个小提琴中，查看 3 个中间部分显示的文本的唯一方法是放置填充以避免它显示在标题 DIV 下方。

我尝试在 middleContainer 上放置 30px 的顶部和底部值来解决重叠问题，但这并不能解决问题，我想要的只是将 headerContainer 保持在顶部，将 footerContainer 保持在底部，同时所有 3 个中间部分都调整为100% 高度。 leftSection 和 rightSection 的宽度是固定的，而 middleSection 的宽度和高度是灵活的。

body {
  margin: 0;
}

#mainContainer {
  position: absolute;
  right: 4%;
  left: 4%;
  height: 100%;
}

#headerContainer {
  width: 100%;
  z-index: 10;
  position: absolute;
  background: #323232;
  color: white;
  height: 30px;
}

#middleContainer {
  height: 100%;
}

#leftSection {
  position: absolute;
  float: left;
  width: 175px;
  background: #71ABD1;
  height: 100%;
  overflow: auto;
  color: black;
  padding-top: 30px;
}

#middleSection {
  position: absolute;
  height: 100%;
  background-color: yellow;
  left: 175px;
  right: 175px;
  color: black;
  padding-top: 30px;
}

#rightSection {
  float: right;
  height: 100%;
  width: 175px;
  border-left: 1px dotted black;
  background: red;
  color: black;
  padding-top: 30px;
}

#footerContainer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30px;
  background: #323232;
  color: white;
}

<div id="mainContainer">
  <div id="headerContainer">
    headerContainer
  </div>
  <div id="middleContainer">
    <div id="leftSection">
      leftSection
    </div>
    <div id="middleSection">
      middleSection
    </div>
    <div id="rightSection">
      rightSection
    </div>
  </div>
  <div id="footerContainer">
    footerContainer
  </div>
</div>

【问题讨论】：

与其使用固定单位，不如使用 flex 方法来创建粘性页脚：stackoverflow.com/questions/23651942/…

标签： html css

【解决方案1】：

你所有的 div 都是 padding-top 30px 和 100% - 这使得容器 100%+30px 高

试试

height:  calc(100% - 30px);

body {
  margin: 0;
}

#mainContainer {
  position: absolute;
  right: 4%;
  left: 4%;
  height: 100%;
}

#headerContainer {
  width: 100%;
  z-index: 10;
  position: absolute;
  background: #323232;
  color: white;
  height: 30px;
}

#middleContainer {
  height: 100%;
}

#leftSection {
  position: absolute;
  float: left;
  width: 175px;
  background: #71ABD1;
  height:  calc(100% - 30px);
  overflow: auto;
  color: black;
  padding-top: 30px;
}

#middleSection {
  position: absolute;
  height:  calc(100% - 30px);
  background-color: yellow;
  left: 175px;
  right: 175px;
  color: black;
  padding-top: 30px;
}

#rightSection {
  float: right;
  height:  calc(100% - 30px);
  width: 175px;
  border-left: 1px dotted black;
  background: red;
  color: black;
  padding-top: 30px;
}

#footerContainer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30px;
  background: #323232;
  color: white;
}

<div id="mainContainer">
  <div id="headerContainer">
    headerContainer
  </div>
  <div id="middleContainer">
    <div id="leftSection">
      leftSection
    </div>
    <div id="middleSection">
      middleSection
    </div>
    <div id="rightSection">
      rightSection
    </div>
  </div>
  <div id="footerContainer">
    footerContainer
  </div>
</div>

【讨论】：