当前位置： 文江博客话题详情

如何在同一页面上设置 73px 的 div 和 100% 的 iframe？

发布于 2024-11-15 05:23:32 字数 223 浏览 2 评论 0原文

这应该很容易，但我花了一段时间试图解决这个问题......我有一个高度为 73px 的 div。我还有一个 Iframe，它应该延伸到页面的其余部分，但它溢出了，并且我有两个滚动条（Iframe 和页面）。如何让 div 位于 Iframe 上方并让 Iframe 处于 100% 高度？我也尝试过负边距和填充，但没有起到任何作用。

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

原文

This should be easy, but I've spent a while trying to figure this out... I have a div that is 73px in height. I also have an Iframe that is suppose to stretch to the rest of the page but it overflows and I have two scroll bars (Iframe, and page). How can I have the div above the Iframe and have the Iframe in 100% height? I've also tried a negative margin and padding and that hasn't done anything.

Trying to get rid of the page scroll bar when using 100% and top: 73, but you can see the code for yourself.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（7）

情绪失控 2024-11-22 05:23:32

我发现这是一个有趣的问题，因此我花了一些时间调试您页面上的设计。

现在对我来说，文本区域总是精确地拉伸到页面底部，而不是更远，并且页面滚动条不会出现。

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

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，我自己没有找到。

I find this an interesting problem, so I've spent some time debugging the design on your page.

Now for me, the textarea always stretch exactly to the bottom of the page, not farther, and the page scrollbar does not appear.

Here are the modifications (I hope you did not change your code or stylesheets too much while I was debugging):

1.) - The "container" div:

Using bottom: 0 together with position: absolute ensures that the div stretch to the end of the page. Using height: 100% would cause the div to overflow! Using overflow: hidden does not allow the page scrollbar to show up.

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

2.) - The left pane ("span-12" div):

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

3.) - The right pane ("span-12 last" div):

You can use the same trick as with the "container"
div: absolute positioning and use of the top, right and bottom css properties.

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

4.) - And the iframe:

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

EDIT - To make it center-aligned, I added "left: 50%; left-margin: -475px;" in the style of the "container" div. This tricks belongs to @clairesuzy, I didn't find it myself.

回复 原文
悲歌长辞 2024-11-22 05:23:32

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>

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>
回复 原文
回梦 2024-11-22 05:23:32

您可以在 iframe 上使用包装器 div 来指定您希望其侧面的位置（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

You can use a wrapper div on the iframe to specify where you want it's sides to be (top:73px; left:0; right:0; bottom:0;) with the help of 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; }

Demo: jsfiddle.net/fErZY

回复 原文
雨后彩虹 2024-11-22 05:23:32

有点棘手..大多数解决方案对于主要部分都可以正常工作，但 IE7 不喜欢将 iframe 设置为 100% 高而其父级没有明确的高度（以像素为单位，而不是百分比） - 所以我的解决方案是绝对定位容器，这样你就可以获得所需的73px顶部和0底部坐标 - 那么它应该像设置#friend_pane一样简单分区到 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

注意： 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

A bit tricky.. and most solutions work OK for the main part but IE7 doesn't like when a iframe is set to 100% tall without it's parent having an explicit height (in px, not percent) - so my solution is to absolutely position the container so you get the 73px top and 0 bottom co-ordinate you need - then it should be as simple as setting the #friend_pane div to 100% height, and then subsequently the iframe to 100%.. but that's the bit IE7 doesn't like.. so adding position: absolute; right: 0; also to the friend_pane div, along with the 100% height - then makes IE7 apply the 100% height to the iframe too.

There is leakage (small?), if that's what you've been referring to in your comments, that is to do with the iframes natural box model, but I found setting a negative bottom margin -4px on the iframe counteracts that

So with your code; remove all inline styles from .container #friend_pane and the iframe #friendpane_area

and add these styles:

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

Here's a demo of this with your page code:

JSBin HERE

Note: overflow:hidden; on the #friend_pane div instead of the negative 4px margin on the iframe will also cure the "leakage"

and to keep some general code in the answer.. a simplified demo

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

which you can see:

JSBin Here

回复 原文
友欢 2024-11-22 05:23:32

您可以将 iframe 包装在 div 中，并使用 top:73px 设置 div 的 position:fixed，然后使用 >right、bottom 和 left 设置为 0，以便 div 填充 73px 标题下方的剩余空间。设置包装器后，您可以将 iframe 的高度和宽度指定为 100%。

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

HTML：

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

CSS：

html, body {margin:0;padding:0;height:100%;font-family:helvetica,arial,sans-serif;}

#header {width:100%;height:73px;}

#wrapper {position:fixed;top:73px;right:0;bottom:0;left:0;}
#frame {width:100%;height:100%;border:0;}

You can wrap your iframe in a div and set the div's position:fixed with top:73px then right, bottom, and left set to 0 so the div fills remaining space below your 73px header. Once your wrapper is set you can specify height and width to 100% for your iframe.

example: http://jsfiddle.net/pxfunc/KTwxb/

HTML:

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

CSS:

html, body {margin:0;padding:0;height:100%;font-family:helvetica,arial,sans-serif;}

#header {width:100%;height:73px;}

#wrapper {position:fixed;top:73px;right:0;bottom:0;left:0;}
#frame {width:100%;height:100%;border:0;}
回复 原文
冬天旳寂寞 2024-11-22 05:23:32

这是一个例子。我能够隐藏滚动条的唯一方法是将 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;
}

Here is an example. Only way I was able to hide the scroll bar was to set the iframe's html overflow property to hidden.
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;
}
回复 原文
江挽川 2024-11-22 05:23:32

看起来 iframe 被视为绝对定位元素，无论您是否实际在 css 中指定它。如果它的容器是绝对定位的，它应该能够使用 width:100% 和 height:100% 填充容器。

换句话说，如果我的理论是正确的，则 iframe 不会“正确”调整大小，因为它正在搜索定位（即相对、绝对、只是非静态）父元素。它需要弄清楚如何调整其大小，并且最接近的abs pos元素是浏览器查看区域本身。屏幕的 100% 高度通常会填满屏幕高度，但 iframe 向下定位 73 像素，从而使其溢出 73 像素。

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

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

It seems like iframe is being treated as an absolutely positioned element whether or not you actually specify that in the css. If its container is absolutely positioned, it should be able to fill the container using width:100% and height:100%.

In other words, if my theory is correct, the iframe isn't sizing "correctly" because it is searching for a positioned (i.e. relative, absolute, just not static) parent element. It needs to figure out how to adjust its size and the closest abs pos element is the browser viewing area itself. 100% height of the screen would normally fill the screen height, but the iframe is positioned down 73px, thus making it overflow by 73px.

Play with this a bit, it should be a nice step in the right direction:

<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>
回复 原文
~没有更多了~

关于作者

楠木可依

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

Gabu-gabumon

文章 0 评论 0

qq_CgiN62

文章 0 评论 0

荔枝明

文章 0 评论 0

赏烟花じ飞满天

文章 0 评论 0

独守阴晴ぅ圆缺

文章 0 评论 0

¤→小豸慧

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文