Question

我坚持这个问题并希望有人能提供解决方案。我发现了一个类似的帖子但没有解决方案。下面是我的标记的一小部分样本

<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>

查看小提琴中的示例：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;
}

希望这就是你要找的东西

Answer 2

您没有关闭iframe。

<iframe src="http://www.reddit.com"
height="100%" width="100%"></iframe>

带有div，iframe，页脚的页面的100％高度

2 个答案: