iframe在顯示時有滾動條：使用inline-block

所以我有一個帶有iframe的頁面，在iframe中，我有一個div的高度被設置爲通過jquery窗口的高度。此元素設置爲display: inline-block，以便它的寬度是div內包含的內容的寬度，而不是完全填充頁面。iframe在顯示時有滾動條：使用inline-block

問題是......當使用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。不幸的是，我不能在我正在編寫的最終應用程序中這樣做，因爲我對「外部」框架沒有任何控制權。

任何想法？

來源

2013-07-05 neubert

在屏幕div中添加任何東西刪除第二個滾動條，我不知道爲什麼... –

嘗試絕對定位。

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

寬度不會拉伸以填充容器，將一個正常塊元件，並且它不需要JavaScript或jQuery的。

來源

2013-07-06 00:00:51 gilly3

iframe在顯示時有滾動條：使用inline-block

回答

相關問題