Question

我想显示iframe的全部内容，以便只有默认的浏览器滚动条。我似乎无法摆脱iframe Verticle滚动条。有什么建议吗？

<!DOCTYPE html>
<head>
<style>
#content{

 min-height: 100vh;
color:#1b1b1b; /*-light black-*/
font-size: 1.1em;
background-color:#f2f0ea;/* --off- yellow-white-- */
padding:1%;
border-radius:5px;
}
</style>
<head>
<html lang = "en">
<body>
    <div style="content">
        <iframe style="overflow:hidden; position: float; display:block;  min-height: 100vh;  background-color: #f2f0ea; border: none;" 
                src="https://docs.google.com/document/d/1L3-ogIreQhm-aHutOfKjDI17buwCJRrkzmwvQGMafGw/pub?embedded=true" 
                height=100% width=100%></iframe>
    </div>
</body>
</html>

Answer 1

iframe src中的googleDocs链接包含以下所有图片：overflow: hidden我制作了具有正常内容的演示。虽然iframe的内容有滚动条，但由于父页面没有滚动条，因此很难分辨。

这里有很多语法错误：

<div style="content">你的真正含义是：<div id="content">
position: float;我不确定你是否打算选择其中一个。
<head> <html lang = "en">

鉴于这两个元素的位置和内容，<head>实际上是结束标记</head>，而<html lang="en">应位于页面的最顶部。

以下是包含正常内容的演示：http://plnkr.co/edit/EFP750Fth4PTutwdK56Y?p=preview

Answer 2

试试这个

<!DOCTYPE html>
<head>
<style>
#content{

 min-height: 100vh;
color:#1b1b1b; /*-light black-*/
font-size: 1.1em;
background-color:#f2f0ea;/* --off- yellow-white-- */
padding:1%;
border-radius:5px;
}

</style>
<head>
<html lang = "en">
<body>
    <div style="content">
        <iframe style="overflow:hidden; position: absolute; display:block;  min-height: 100vh;  background-color: #f2f0ea; border: none;" 
                src="https://docs.google.com/document/d/1L3-ogIreQhm-aHutOfKjDI17buwCJRrkzmwvQGMafGw/pub?embedded=true" 
                height=600%; width=100%  scrolling="no" ></iframe>
    </div>
</body>
</html>

无需滚动即可显示iframe的全部内容

2 个答案: