html - 简单的html布局

Question

我猜我需要简单的东西。但我无法找到或弄清楚如何去做。它看起来很简单，但也许不是。

我需要带有页眉的 html 页面，左侧有 1 个侧边栏和页脚。现在是棘手的部分。我注意到侧边栏的内容是流畅的。在那个区域我需要放置 iframe。页面不应该有任何滚动条，所以只有滚动条是 iframe 中的滚动条。我有一个问题，这个区域总是按标题的高度移动到屏幕的底部边缘下方。这是因为我使用高度 100% 但我不知道任何其他方法。如果有办法做 height: 100%-120px 这不会是一个问题。

Answer 1

检查这个演示：演示

HTML 代码

<header>
  Header
</header>
<nav>
  Nav
</nav>
<div>
  <iframe src='http://sasidhar.com' width='100%' frameborder='0' height ='100%'>
</div>

CSS 代码

* { padding : 0; margin : 0; }
header {
  position absolute;
  top : 0;
  height : 50px;
  background-color : #ccc;
}
nav {
  position : absolute;
  width : 200px;
  top : 50px;
  bottom : 0;
  background-color : #ece;
}
div {
  position : absolute;
  left : 200px;
  top : 50px;
  bottom : 0;
  right : 0;
  background-color : #cee;
  overflow : hidden;
}

这有帮助吗？让我知道。