Question

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

例如，我包含两个页面：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

你需要更高的身高值ex：185

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

margin-top + text（font-size）+默认用户代理主体边距（顶部+底部）= 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>

解决方案

<!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>

如何打破另一页中的对象框架？

1 个答案:

如何打破另一页中的对​​象框架？

1 个答案:

如何打破另一页中的对象框架？