目前，我正在开发一个使用各种框架来显示内容的网站。一个框架由一个可折叠菜单组成，它需要比实际框架提供的更多空间。是否可以在不调整所有页面的情况下突破特定的框架宽度？我不想使用滚动条，我已经在使用 z-indexes。
例如，我包含两个页面:index.html 和 includedpage.html。在这种情况下，我希望在不调整 index.html 并且不看到滚动条的情况下看到文本。
index.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
body {
background-color: green;
}
</style>
</head>
<body>
<object data="includedpage.html" width="100%" height="150"></object>
</body>
</html>
Includedpage.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
html{
overflow: hidden;
}
body {
background-color: yellow;
}
#content_need_to_displayed{
margin-top: 150px;
}
</style>
</head>
<body>
<div id="content_need_to_displayed">
Test
</div>
</body>
</html>
最佳答案
您需要一个更大的高度值，例如:185
<object data="includedpage.html" width="100%" height="185"></object>
margin-top + text(font-size) + default user agent body margin ( top+bottom )= 150 + 18.5 + 16px (on Chrome)~=185px
或者你可以使用百分比
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
body {
background-color: green;
}
body,html{
height:100%
}
</style>
</head>
<body>
<object data="Includedpage.html" width="100%" height="100%"></object>
</body>
</html>
js解决方案
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
body {
background-color: green;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<object id="mypage" data="includedpage.html" width="100%"></object>
<script type="text/javascript">
function getDocHeight(doc) {
doc = doc || document;
// stackoverflow.com/questions/1145850/
var body = doc.body,
html = doc.documentElement;
var height = Math.max(body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight);
return height;
}
function setIframeHeight(id) {
var ifrm = document.getElementById(id);
var doc = ifrm.contentDocument ? ifrm.contentDocument :
ifrm.contentWindow.document;
ifrm.style.visibility = 'hidden';
ifrm.style.height = "10px"; // reset to minimal height ...
// IE opt. for bing/msn needs a bit added or scrollbar appears
ifrm.style.height = getDocHeight(doc) + 4 + "px";
ifrm.style.visibility = 'visible';
}
document.getElementById('mypage').onload = function() { // Adjust the Id accordingly
setIframeHeight(this.id);
}
</script>
</body>
</html>
关于javascript - 如何在另一个页面中突破一个对象框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39368122/