CSS iframe 的溢出问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3477848/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Iframe's overflow problem
提问by Pinki
I have a simple page that contains an iframe. The iframe contains a page with some divs. When I open the embedded page separetely it works very well. The div that should be overflowed is overflowed. But when I open the container site it is not. Here are my codes:
我有一个包含 iframe 的简单页面。iframe 包含一个带有一些 div 的页面。当我单独打开嵌入页面时，它运行良好。应该溢出的div溢出了。但是当我打开容器站点时，它不是。这是我的代码：
Container page:
容器页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
#content{
margin: auto;
width: 500px;
height: 1000px;
background: green;
}
#frame{
width:202px;
height:302px;
overflow: visible;
}
</style>
</head>
<body>
<div id="content">
<iframe id="frame"
src="http://localhost:8080/webApp/view/test/embeddable.html"
scrolling="no" frameborder="0" allowTransparency="true" marginheight="0" marginwidth="0">
</iframe>
</div>
</body>
</html>
Embeddable page:
可嵌入页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body {
width: 200px;
height: 300px;
overflow: visible;
border: 1px solid yellow;
}
#id1{
margin: auto;
width: 500px;
height: 10px;
border: 1px solid white;
background: red;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="id1"></div>
</body>
</html>
id1 should be overflowed but it isn't. I have set all the important div's "overflow" property to "visible" (even if it is the default). I don't know what I'm doing wrong.
id1 应该溢出，但事实并非如此。我已将所有重要 div 的“溢出”属性设置为“可见”（即使它是默认值）。我不知道我做错了什么。
回答by William Niu
In short, it is not possible to have an overflowed iframe. This postgives an explanation.
简而言之，不可能有溢出的 iframe。这个帖子给出了解释。
To achieve the similar effect you're after, you're better off use AJAX to inject the embedded page into a div, and make the div overflow.
为了达到你所追求的类似效果，你最好使用 AJAX 将嵌入的页面注入到 div 中，并使 div 溢出。
