这是我试图制作此问题的小提琴：
http://jsfiddle.net/BPJxD/1/

使用顶部,中间和底部部分的标记,问题是：

1-如您所见,尽管页脚div上具有position：absolute和bottom：0px,但黑色的页脚并未真正位于页面底部

2-更重要的是,leftSection,middleSection和rightSection DIV与页眉和页脚DIV重叠,实际上,在此提琴中,查看3个中间部分显示的文本的唯一方法是放置填充,以避免将其显示在中间.标头DIV.

我试过在MiddleContainer上放置30px的top和bottom值来解决重叠问题,但这不能解决问题,我只想将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>