使用div，iframe，页脚的页面高度为100％

我遇到了问题，希望有人可以提供解决方案。我发现了一个类似的帖子，但没有解决这个问题。下面是我的标记的小样本使用div，iframe，页脚的页面高度为100％

<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％无下面的空白。由于屏幕/浏览器窗口大小的改变，wrapper div将同时容纳“内容”和iframe，以自动调整iframe的高度。这似乎是一个非常简单的任务，但我找不到一种方法使其工作。其他人是否对我可能错过的内容有所了解？寻找最好的纯CSS解决方案。

来源

2012-08-13 DaRussian

首先你的HTML是有缺陷的：'高度：“100％”' – 2012-08-13 02:22:22

这是不是这样的例子上的jsfiddle – DaRussian 2012-08-13 03:48:44

请务必不要类和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-13 02:39:59 Moe

对不起，那是我的错。我正在剥离内联CSS并混淆了两者。即使使用正确的语法 - 它仍然无法正常工作。 http://jsfiddle.net/SaYAw/36/ – DaRussian 2012-08-13 03:47:30

您没有关闭您的iframe中。

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

来源

2012-08-13 15:54:47

使用div，iframe，页脚的页面高度为100％

回答

相关问题