0

所以我有一个带有 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如果我删除 5000px 宽的 div，即使 iframe 的滚动条也会消失。不幸的是，我无法在我尝试编写的最终应用程序中这样做，因为我无法控制“外部”框架。

有任何想法吗？

4

1 回答 1

0

尝试绝对定位。

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

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

于 2013-07-06T00:00:51.923 回答