css - 带有 div、iframe、页脚的页面的 100% 高度

Question

我被这个问题困住了，希望有人能提供解决方案。我发现了一个类似的帖子，但没有关于 SO 的解决方案。 下面是我的标记的一小部分

<div id="wrapper">
  <div id="content">
    Some text goes here
    <iframe src="http://www.reddit.com" height="100%" width="100%" />
  </div>
  <div id="footer"> footer text</div>
</div>

看 fiddle 中的例子:http://jsfiddle.net/SaYAw/36/

我想要实现的是让包装器 div 占用 100% 的页面，下面不留空白。 包装器 div 将同时容纳“内容”和 iframe，随着屏幕/浏览器窗口大小的变化自动调整 iframe 的高度。 这似乎是一项非常简单的任务，但我找不到让它工作的方法。有没有人知道我可能会遗漏什么？ 寻找最好的纯 CSS 解决方案。

Answer 1

请确保不要混淆类和ID

该类以点 '.' 开头，就像您在 CSS 文件中一样

但在您的 HTML 中，您没有设置类，而是一个 ID。因此，您需要将 CSS 改为 '#'

html, body
{
    height:100%;
    min-height:100%;
}
#wrapper
{
    border: 1px dotted #000;
    margin:5px;
    height:100%;
    min-height:100%;
}
#content
{
    border:1px solid #ccc;
    margin:5px;
    padding:5px;
    height:100%;
    min-height:100%;
}
#ifrContent
{
    height:100%;
    min-height:100%;
    overflow:scroll;
}

希望这就是你要找的