1

我被这个问题困住了，希望有人能提供解决方案。我发现了一个类似的帖子，但没有关于 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>

看小提琴中的例子：http: //jsfiddle.net/SaYAw/36/

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

4

2 回答 2

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

希望这就是你要找的

于 2012-08-13T02:39:59.677 回答
0

你没有关闭你的 iframe。

<iframe src="http://www.reddit.com"
height="100%" width="100%"></iframe>
于 2012-08-13T15:54:47.837 回答