如何使用页面具有页眉、页脚和 100% 高度内容的 css 生成页面布局？

Question

我正在尝试创建一个受 IE8+ 支持的页面。

我需要页面有一个 100% 宽度的页眉和页脚。

在左侧，我需要有一个“高度为 100%”的菜单。在菜单的右侧，我需要放置一个 iframe，它需要占据布局中心的全宽、全高。

这是我到目前为止所做的事情

<div class="container-fluid container-fluid-override">

<div class="b_header" >
   HEADER
</div>

<div class="bodyBlock">

    <div class="left_menu">LEFT MENU</div>


    <div class="right_menu">iFrame should go here</div>

</div>


<div class="b_footer">
   Footer
</div>

这是我的css代码

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

.container-fluid-override
{
  height: 100%; 
  margin: 0;
  padding: 0;
}
.bodyBlock {
  height: 100% !important;
  display: inline-block;
}
.left_menu {
  background-color: orange;
  display: inline-block;
  width: 140px;
  height: 100%;
}

.right_menu {
  display: inline-block;
  width: calc(100% - 140);
  height: 100%;
}

iframe {
  box-sizing: border-box;
  height: 100vh;
}

.b_header {
  width: 100%;
  height: 75px;
  padding: 10px;
  background-color: blue;
  text-align: center;
  color: white;
  font-weight: bold;
  box-sizing: border-box;
  left: 0;
  top: 0; 
}

.b_footer {
  width: 100%;
  height: 50px;
  padding: 10px;
  background-color: purple;
  text-align: center;
  color: #ffffff;
  font-weight: bold;
  box-sizing: border-box;
  left: 0;
  bottom: 0;
}

我用我的代码http://jsfiddle.net/qgaLtbgg/7/创建jFiddle

我的布局的问题是，如果我删除文本“iFrame 应该放在此处”，页面中间就会消失。

另外，当我尝试将 iframe 放在中间框架时，左侧菜单消失了。

我该如何解决这个问题？

Answer 1

我对其进行了以下更新，它现在可以工作了。我将文本移到左侧菜单，但布局仍然有效。

.right_menu {
  display: inline-block;
  width: calc(100% - 140);
  height: 100%;
  position: absolute;
}

Answer 2

首先你的calc 函数输入错误，最后你需要px。由于菜单是 display:inline-block，我已将 vertical-align:top 添加到 .left-menu 以使其正常工作，您可以在示例中看到已删除文本的右侧菜单仍然正确对齐。

Example

（注意：如果 html 中的 div 之间有空格，则菜单之间会有空格，因为它们是 display:inline-block）

代码：

  html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

.container-fluid-override
{
  height: 100%; 
  margin: 0;
  padding: 0;
}
.bodyBlock {
    height: 100% !important;
    display: inline-block;
    width: 100%;
    vertical-align: top;
}
.left_menu {
  background-color: orange;
  display: inline-block;
  width: 140px;
  vertical-align: top;
  height: 100%;
}

.bodyBlock {
    height: 100% !important;
    display: inline-block;
    width: 100%;
    vertical-align: top;
}

iframe {
  box-sizing: border-box;
  height: 100vh;
}

.b_header {
  width: 100%;
  height: 75px;
  padding: 10px;
  background-color: blue;
  text-align: center;
  color: white;
  font-weight: bold;
  box-sizing: border-box;
  left: 0;
  top: 0; 
}

.b_footer {
  width: 100%;
  height: 50px;
  padding: 10px;
  background-color: purple;
  text-align: center;
  color: #ffffff;
  font-weight: bold;
  box-sizing: border-box;
  left: 0;
  bottom: 0;
}

.right_menu {
      display: inline-block;
    width: calc(100% - 140px);
    background: green;
    height: 100%;

}