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

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

来源

2016-09-07 Tom

_“我的工作是利用各种帧显示的内容在网站上” _ - 到目前为止，如此糟糕。虽然你并没有在这里使用框架，但是对象 - 但是这两种方法的可用性缺点都差不多。你应该真的寻找其他方法来实现你想要的。 – CBroe

你需要高度的前一个更大的值：185

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

的margin-top +文字（字体-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>

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>

来源

2016-09-07 13:47:17

感谢您的帮助。我知道这是可能的，尽管这不是我的意思。我正在寻找一种方法来检索包含页面上的信息，而无需调整高度。也许这是不可能的，但我不确定。 – Tom

我已经用js解决方案更新了我的答案，您无法仅从CSS修复它。 –

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

回答

相关问题