0

iframe を含むページがあり、その iframe には、jquery を介して高さがウィンドウの高さに設定されている div があります。この要素は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>

two-scrollbars-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 に答える