如何突破另一个页面中的对象框？

Question

目前，我正在开发一个使用各种框架来显示内容的网站。一个框架由一个可折叠的菜单组成，它需要比实际框架提供的更多空间。是否可以在不调整所有页面的情况下打破特定的框架宽度？我不想使用滚动条，而且我已经在使用 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>

Answer 1

你需要一个更大的高度值，例如：185

<object data="includedpage.html" width="100%" height="185"></object>

margin-top + text(font-size ) + 默认用户代理正文边距 (top+bottom)= 150 + 18.5 + 16px（在 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>