У меня есть простая страница, содержащая iframe. Iframe содержит страницу с некоторыми div. Когда я открываю встроенную страницу отдельно, она работает очень хорошо. Div, который должен быть переполнен, переполнен. Но когда я открываю контейнерный сайт, это не так. Вот мои коды:
Контейнерная страница:
<!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>
Встраиваемая страница:
<!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 должен быть переполнен, но это не так. Я установил все важное свойство div "overflow" на "visible" (даже если оно установлено по умолчанию). Я не знаю, что делаю не так.
Короче говоря, невозможно переполнение iframe. Этот пост дает объяснение.
Чтобы добиться того же эффекта, который вам нужен, лучше использовать AJAX, чтобы вставить встроенную страницу в div и сделать его переполненным.