Question

所以我有一个带iframe的页面，在那个iframe中，我有一个div，通过jquery将高度设置为窗口的高度。此元素设置为display: inline-block，因此它的宽度是div中包含的内容的宽度，而不是完全填充页面。

问题是......当使用display: inline-block时，会出现在使用display: block时未显示的滚动条。

网站：

http://www.frostjedi.com/terra/scripts/demo/two-scrollbars.html

代码：

<body style="margin: 0; padding: 0">
  <div style="width: 5000px; height: 10px; background: black"></div>
  <iframe src="two-scrollbars-iframe.html" style="border: 0; width: 100%; height: 100%"></iframe>
</body>

两滚动条-Iframe.html的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script>
$(document).ready(function() {
    $(".screen").height($(window).height());
});
</script>

</head>

<body style="margin: 0">
<div style="width: 300px; background: green; display: inline-block" class="screen"></div>
</body>

这是display: block：

http://www.frostjedi.com/terra/scripts/demo/two-scrollbars-2.html

我还注意到即使使用display: inline-block iframe的滚动条也会消失，如果我移除5000px宽的div。不幸的是，我不能在我试图编写的最终应用程序中这样做，因为我对“外部”框架没有任何控制权。

有什么想法吗？

Answer 1

尝试绝对定位。

.screen
{
    position: absolute;
    top: 0;
    bottom: 0;
}

与普通的块元素一样，宽度不会拉伸以填充容器，并且它不需要JavaScript或jQuery。

显示时，iframe有滚动条：使用内联块

1 个答案: