html - 我怎样才能在同一页面上有一个 73px 的 div 和一个 100% 的 iframe？

Question

这应该很容易，但我花了一段时间试图弄清楚这个问题……我有一个高度为 73 像素的 div。我还有一个 Iframe，它应该延伸到页面的其余部分，但它溢出了，我有两个滚动条(Iframe 和页面)。如何让 div 位于 Iframe 上方并使 Iframe 处于 100% 高度？我也尝试了负边距和填充，但没有做任何事情。

尝试在使用100%和top:73时去掉页面滚动条，但是你可以自己看代码。

Answer 1

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

现在对我来说，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.) - 左 Pane (“span-12”div):

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

3.) - 右 Pane (“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%">

编辑——为了使其居中对齐，我添加了“左:50%；左边距:-475px；”以“容器”div 的风格。这个技巧属于@clairesuzy，我自己没找到。