Question

这应该很简单，但是我花了一些时间试图解决这个问题......我有一个高度为73px的div。我也有一个iframe，它可以延伸到页面的其余部分，但它会溢出，我有两个滚动条（Iframe和页面）。如何在iframe上方使用div并使iframe的高度为100％？我也尝试了一个负余量和填充，但没有做任何事情。

尝试在使用100％和top：73时摆脱页面滚动条，但您可以自己查看代码。

Answer 1

http://jsfiddle.net/HZTTp/：

<!doctype html>
<html>
    <head>
        <title></title>
        <style>
html, 
body {
    margin: 0;
    overflow: hidden;
}
body {
    padding: 0 !important;
    padding: 30px 0 0;
}
#top {
    position: absolute;
    top: 0;
    left: 0;
    height: 30px;
    width: 100%;
    overflow: hidden;
    background: gray;
}
html 
> 
body 
#bot {
    position: absolute;
    top: 30px;
    bottom: 0;
    width: 100%;
}
object {
    width: 100%;
    height: 100%;
}
        </style>
    </head>
    <body>
        <div id="top"></div>
        <div id="bot">
            <object data="foo"></object>
        </div>
    </body>
</html>

Answer 2

您可以使用div上的包装iframe在top:73px; left:0; right:0; bottom:0;的帮助下指定您希望它的边缘（position:absolute）。

<强> HTML：

<div id="head"></div>
<div id="main">
    <iframe src="http://i.reddit.com/"></iframe>
</div>

<强> CSS：

body { margin:0; padding:0; }
#head { height:73px; background:#c33; }
#main { top:73px; left:0; right:0; bottom:0; position:absolute; }
#main iframe { border:0; width:100%; height:100%; display:block; }

演示： jsfiddle.net/fErZY

Answer 3

我发现这是一个有趣的问题，所以我花了一些时间在你的页面上调试设计。

现在对我来说，textarea总是精确地伸展到页面的底部，而不是更远，并且页面滚动条不会出现。

以下是修改（我希望您在调试时没有过多地更改代码或样式表）：

1。） - “容器”div：

将bottom: 0与position: absolute一起使用可确保div延伸到页面末尾。使用height: 100%会导致div溢出！使用overflow: hidden不允许显示页面滚动条。

<div class="container" style="position: absolute; top: 73px; bottom: 0; overflow: hidden; left: 50%; margin-left: -475px;">

2。） - 左侧窗格（“span-12”div）：

<div class="span-12" style="float: left; padding-top: 17px; width: 470px">

3。） - 右侧窗格（“span-12 last”div）：

您可以使用与“容器”相同的技巧 div：绝对定位和使用top，right和bottom css属性。

 <div class="span-12 last" id="friend_pane" style="position: absolute; top: 0; right: 0; bottom: 0">

4。） - 和iframe：

<iframe src="/friend/shell.php" frameBorder="0" allowTransparency="true" style="height: 100%; width: 100%">

编辑 - 为了使其居中对齐，我添加了“left：50％; left-margin：-475px;”在“容器”div的风格。这个技巧属于@clairesuzy，我自己也找不到。

Answer 4

有点棘手..大多数解决方案对主要部分都有效但IE7不喜欢当iframe设置为100％高而没有它的父级具有明确的高度（以px为单位，而不是百分比） - 所以我的解决方案是绝对定位container，这样你就可以获得所需的73px顶部和0底部坐标 - 然后它应该就像将#friend_pane div设置为100％高度一样简单，然后是iframe到100％..但那是IE7不喜欢的......所以将position: absolute; right: 0;也添加到friend_pane div，以及100％的高度 - 然后使IE7也将100％的高度应用于iframe。

有泄漏（小？），如果这是你在评论中提到的，那就是与iframes自然框模型有关，但我发现在底部设置了一个负底边-4px iframe抵消了

所以使用你的代码;从.container #friend_pane和iframe #friendpane_area

中删除所有内嵌样式

并添加以下样式：

.container {
    position: absolute;
    top: 73px;
    bottom: 0;
    left: 50%;
    margin-left: -475px;
    background: #cff; /* for testing only */
}

#friend_pane {
   position: absolute; 
   right: 0;
   height: 100%; 
   background: #fcf; /* for testing only */
}

#friend_pane iframe {
   border: 0;
   padding: 0;
   margin: 0;
   width: 470px; 
   height: 100%; 
   margin-bottom: -4px;
}

以下是您的网页代码的演示：

JSBin HERE

注意：<{strong> overflow:hidden; #friend_pane div 而不是 iframe上的负4px边距也将治愈“泄漏” “

并在答案中保留一些通用代码..简化演示

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>FriendsConnect | My dashboard</title> <style type="text/css" media="screen"> body { background-color: #4DA2CA; margin: 0px; padding: 0px; } #mainbar { background-image: url('http://friendsconnect.org/bar_fade.png'); background-repeat: repeat-x; background-color: #494949; padding-top: 6px; height: 67px; } #infobox_left { color: #444444; margin-bottom: 15px; padding: 15px; background-image: url('http://friendsconnect.org/grp2.png'); background-color: #F2F2F2; background-repeat: repeat-x; float: left; width: 440px; } #com-status { border: solid 1px; border-color: #3B7D99; background-color: #4794B7; padding: 15px; float: left; clear: left; width: 440px; } .container { position: absolute; width: 950px; top: 73px; bottom: 0; left: 50%; margin-left: -475px; background: #cff; /* for testing only */ } #friend_pane { position: absolute; top: 0; right: 0; height: 100%; background: #fcf; /* for testing only */ } #friend_pane iframe { border: 0; padding: 0; margin: 0; width: 470px; height: 100%; margin-bottom: -4px; } </style> </head> <body> <div align="left" id="mainbar">Main bar</div> <div class="container"> <div style="padding-top: 17px;" class="span-12"> <div id="infobox_left"> <font color="#000000">Welcome TEST, what's up?<br/></font> SOCIAL POINTS  <font color="#000000">0 Points</font><br/> ACCOUNT STATUS  <font color="#2C8231">No Problems Found</font><br/> CONNECTBOX  <font color="#000000">0 New Messages</font> </div> <div id="com-status"> <strong>Pete Allport commented on your status</strong><br/>Pete Allport Commented: Yeah bro thats beastt...  <div style="float: right;"><button>Close</button></div> </div> </div> <div id="friend_pane"> <iframe id="friendpane_area" src="http://google.com" frameborder="0" allowTransparency="true"></iframe> </div> </div> </body> </html>
你可以看到
：

JSBin Here

Answer 5

您可以将iframe包裹在div中，并将div position:fixed设置为top:73px，然后设置right，bottom和{{ 1}}设置为0，以便div填充73px标题下方的剩余空间。设置好包装后，您可以为iframe指定高度和宽度为100％。

示例：http://jsfiddle.net/pxfunc/KTwxb/

<强> HTML：

left

<强> CSS：

<div id="header">Header</div>
<div id="wrapper">
    <iframe id="frame" src="http://www.supercalifragilisticexpialidocious.com/"></iframe>
</div>

Answer 6

这是一个例子。只有我能够隐藏滚动条的方法是将iframe的html溢出属性设置为隐藏。 http://jsfiddle.net/nERqu/

HTML：

<div class="top">
    <p>div text</p>
</div>
<iframe class="iframeBottom" src="http://www.google.com">
</iframe>

CSS：

.iframeBottom {
    height: 100%;
    width: 100%;
    position: absolute;
    scrolling: no;
}
.top {
    height: 73px;
    width: 100%;
    background-color: yellow;
    position: absolute;
    z-index: 999;
}

Answer 7

似乎iframe被视为一个绝对定位的元素，无论你是否在css中实际指定了它。如果它的容器是绝对定位的，它应该能够使用宽度填充容器：100％和高度：100％。

换句话说，如果我的理论是正确的，那么iframe没有“正确”调整大小，因为它正在搜索定位（即相对的，绝对的，非静态的）父元素。它需要弄清楚如何调整其大小，最接近的abs pos元素是浏览器查看区域本身。屏幕的100％高度通常会填满屏幕高度，但iframe的位置为73px，因此会溢出73px。

稍微玩一下，这应该是朝着正确方向迈出的一小步：

<div style="position:absolute; width: 515px; top:73px; bottom:0px; right:0px;">
    <iframe id="friendpane_area" style="position:absolute; width:100%; height: 100%;" src="./FriendsConnect   My dashboard_files/shell.htm" frameborder="0" allowtransparency="true"></iframe>
</div>

如何在同一页面上以73px和100％的iframe获得div？

7 个答案:

JSBin HERE

JSBin Here