相关疑难解决方法(0)

有问题的网页如下所示:

// The Header //
/*            */
/*  CONTENT   */
/*            */
// The footer //

页眉和页脚都有固定的高度.让我们说例如两者的高度都是20px.我需要将内容的高度设置为100%减去40px(页眉+页脚高度).我知道我可以使用JavaScript轻松完成这项工作,但如果有可能的话,学习如何使用纯CSS来实现它会很酷.

包裹在一个pageWrapper容器中,我在一列中有3个div.第一个(标题)和最后一个(navWrapper)具有固定的高度.我需要中间的one(contentWrapper)来拉伸高度,直到父div pageWrapper达到最大高度(根据浏览器的视口).

我绘制了这个问题的模式.

这是我目前解决方案的 一个小提琴.http://jsfiddle.net/xp6tG/

这里的代码

CSS和HTML

html, body{
  height: 100%;
}

body{
  background-color: #E3E3E3;
}

#pageWrapper{
  margin: 0 auto;
  position: relative;
  width: 600px;
  height: 100%;
}

header{ 
  display:block;
  width: 100%;
  height: 100px;
  background: yellow;
}

#contentWrapper{
  width: 100%;
  height: 100%;
  background: blue;
}

#navWrapper{
  width: 100%;
  height: 100px;
  background: green;
}

<div id="pageWrapper">
  <header>
    Header
  </header>
  <div id="contentWrapper">
    Content
  </div>
  <div id="navWrapper">
    Nav
  </div>
</div>

它几乎正常工作,但它导致高度过高,导致出现垂直滚动条.

我最近一直在寻找一种CSS布局,它将显示一个固定宽度(最小宽度,最好可扩展)的单个居中柱,占据整个高度(减去页眉和页脚).

有什么建议吗？我已尝试过这里发布的几种方法,但没有一种符合我的标准.另外,我不想为此使用JS,所以它必须是纯CSS.

我不是专家所以我不知道采取哪种方法:

三列,每侧柱边距减去中心柱宽度的一半,还有一个人造中心柱,可伸展到100%高度？我有点不喜欢这个想法,因为我的副栏目没有任何内容

带有边距0的单列自动0自动居中和顶部:xx px为标题腾出空间？然后我该如何将其拉伸至100%高度？

任何帮助高度赞赏.

干杯,chross

我有三个div元素（页眉、中间和页脚），我想将页眉和页脚的高度固定为 100px，中间的高度根据窗口内部高度具有动态高度。

我尝试了以下操作但没有成功：

<div id="header" style="background-color:white;width:100px; height:12vh; margin: 0; padding: 0 ;border:0;"></div>
<div id="map_canvas" style="background-color:black;width:window.innerHeight-200;height:78vh;margin: 0; padding: 0 ;border:0"></div>
<div id="footer" style="background-color:white;width:100px; height:10vh; margin: 0; padding: 0 ;border:0;bottom:0px"></div>