【问题标题】:Iframe 100% height inside body with paddingiframe 100% 高度在体内,带填充
【发布时间】:2010-11-21 04:23:46
【问题描述】:

我的 HTML 文档中有一个 iframe,我遇到了一些麻烦。

我还在页面顶部有一个 URL 栏(固定位置元素),当用户滚动时它应该与用户保持一致。这很好用。我希望 iframe 填充剩余空间,但不被 URL 栏覆盖。

这就是我要说的。 http://s75582.gridserver.com/Ls

如何解决此问题,以使 URL 栏不会覆盖页面的一部分?当我尝试在正文中设置填充时,它只会创建一个额外的、烦人的滚动条。

【问题讨论】:

  • 为什么要使用 iframe 模拟常规帧?只需使用常规框架。

标签: html css iframe


【解决方案1】:

虽然您不能在 CSS 中说“高度:100% 减去一些像素”,但您可以将 iframe 设置为 100% 高,然后使用填充将其顶部向下推。然后,您可以利用 CSS3 box-sizing 属性使填充从高度中减去。

这个:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
    <title>test</title>
    <style type="text/css">
        html, body { margin: 0; padding: 0; height: 100%; }
        #bar { height: 32px; background: red; }
        iframe {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            border: none; padding-top: 32px;
            box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
        }
    </style>
</head><body>
    <iframe src="http://www.google.com/"></iframe>
    <div id="bar">foo</div>
<body></html>

适用于 IE8、Moz、Op、Saf、Chrome。对于不支持 box-sizing 的浏览器(尤其是最高 7 的 IE),您必须继续使用 JavaScript 回退以使额外的滚动条消失。

【讨论】:

  • 这个答案启发了我正在使用的当前解决方案。我在 body 元素上有 border-box 和顶部/底部 padding 作为页眉和页脚。对于 IE6,我在 DOCTYPE 之前添加了一个 XML 序言,以使其进入 quirks 模式。那只剩下IE7了。我正在研究一个更好的解决方案,但这是我现在所拥有的。谢谢你教我box-sizing! (我真的需要沉浸在 CSS3 中……)
  • 要使 IE6/IE7 支持box-sizing,请参阅webfx.eae.net/dhtml/boxsizing/boxsizing.html。我不得不修改代码以支持百分比宽度/高度。我将我的修改作为完整格式等的单独答案发布。
  • 只是想补充一点,你可以做到 100% 高度减去一些像素:height: calc(100% - 30px);
【解决方案2】:

无需任何Javascript即可完成,适用于IE7

CSS:

body {
    overflow-y: hidden;
}

#imagepgframe { 
    width: 100%;
    height: 100%;
    position: absolute;
}

#wrap { 
    width: 100%;
    position: absolute;
    top: 100px; 
    left: 0;
    bottom: 0;
}

HTML:

<div id="wrap"> 
    <iframe  id="imagepgframe" frameBorder="0" src="http://en.wikipedia.org/wiki/Internet_Explorer_7"></iframe>
</div>      

【讨论】:

    【解决方案3】:

    建立在bobince's answer之上:

    Erik Arvidsson 想出了一种方法来(有点,有点)添加box-sizing support to IE6/IE7。但是,他的解决方案不支持px 以外的单位。和你一样,我需要百分比高度,所以我添加了对百分比的支持。

    下载并解压 zip file 后,打开 boxsizing.htc 并替换以下边框/填充函数:

    /* border width getters */
    function getBorderWidth(el, sSide) {
        if (el.currentStyle["border" + sSide + "Style"] == "none")
            return 0;
        var n = parseInt(el.currentStyle["border" + sSide + "Width"]);
        return n || 0;
    }
    
    function getBorderLeftWidth()   { return getBorderWidth((arguments.length > 0 ? arguments[0] : element), "Left"); }
    function getBorderRightWidth()  { return getBorderWidth((arguments.length > 0 ? arguments[0] : element), "Right"); }
    function getBorderTopWidth()    { return getBorderWidth((arguments.length > 0 ? arguments[0] : element), "Top"); }
    function getBorderBottomWidth() { return getBorderWidth((arguments.length > 0 ? arguments[0] : element), "Bottom"); }
    /* end border width getters */
    
    /* padding getters */
    function getPadding(el, sSide) {
        var n = parseInt(el.currentStyle["padding" + sSide]);
        return n || 0;
    }
    
    function getPaddingLeft()   { return getPadding((arguments.length > 0 ? arguments[0] : element), "Left"); }
    function getPaddingRight()  { return getPadding((arguments.length > 0 ? arguments[0] : element), "Right"); }
    function getPaddingTop()    { return getPadding((arguments.length > 0 ? arguments[0] : element), "Top"); }
    function getPaddingBottom() { return getPadding((arguments.length > 0 ? arguments[0] : element), "Bottom"); }
    /* end padding getters */
    

    然后将updateBorderBoxWidth 和updateBorderBoxHeight 替换为以下内容:

    function updateBorderBoxWidth() {
        element.runtimeStyle.width = "";
        if (getDocumentBoxSizing() == getBoxSizing())
            return;
        var csw = element.currentStyle.width;
        var w = null;
        if (csw != "auto" && csw.indexOf("px") != -1) {
            w = parseInt(csw);
        } else if (csw != "auto" && csw.indexOf("%") != -1) {
            var origDisplay = element.runtimeStyle.display;
            element.runtimeStyle.display = "none";
    
            w = Math.max(0, (parseInt(element.parentNode.clientWidth) - (
                    getBorderLeftWidth(element.parentNode)
                     + getPaddingLeft(element.parentNode)
                     + getPaddingRight(element.parentNode)
                     + getBorderRightWidth(element.parentNode)
            )) * (parseInt(csw) / 100));
    
            element.runtimeStyle.display = origDisplay;
        }
        if (w !== null) {
            if (getBoxSizing() == "border-box") {
                setBorderBoxWidth(w);
            } else {
                setContentBoxWidth(w);
            }
        }
    }
    
    function updateBorderBoxHeight() {
        element.runtimeStyle.height = "";   
        if (getDocumentBoxSizing() == getBoxSizing())
            return;
        var csh = element.currentStyle.height;
        var h = null;
        if (csh != "auto" && csh.indexOf("px") != -1) {
            h = parseInt(csh);
        } else if (csh != "auto" && csh.indexOf("%") != -1) {
            var origDisplay = element.runtimeStyle.display;
            element.runtimeStyle.display = "none";
    
            h = Math.max(0, (parseInt(element.parentNode.clientHeight) - (
                    getBorderTopWidth(element.parentNode)
                    + getPaddingTop(element.parentNode)
                    + getPaddingBottom(element.parentNode)
                    + getBorderBottomWidth(element.parentNode)
            )) * (parseInt(csh) / 100));
    
            element.runtimeStyle.display = origDisplay;
        }
        if (h !== null) {
            if (getBoxSizing() == "border-box") {
                setBorderBoxHeight(h);
            } else {
                setContentBoxHeight(h);
            }
        }
    }
    

    然后像其他方式一样使用该文件:

    .border-box {
        behavior:           url("boxsizing.htc");
        box-sizing:         border-box;
        -moz-box-sizing:    border-box;
        -webkit-box-sizing: border-box;
    }
    

    这是我在开发修改时进行的非常彻底的测试:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
        <head>
            <title>box-sizing: border-box;</title>
            <style type="text/css">
                html, body {
                    margin:     0;
                    padding:    0;
                    width:      100%;
                    height:     100%;
                    background: yellow;
                }
                body {
                    padding-top:    50px;
                    padding-bottom: 50px;
                }
                p {
                    margin: 0;
                }
    
                    #header, #footer {
                        height:   50px;
                        position: absolute;
                        width:    100%;
                        overflow: hidden;
                    }
                        #header {
                            background: red;
                            top:        0;
                        }
                        #footer {
                            background: blue;
                            bottom:     0;
                        }
    
                    #content {
                        width:          100%;
                        height:         100%;
                        border:         none;
                        margin:         0;
                        padding:        0;
                        background:     black;
                        color:          white;
                        overflow:       auto;
                        position:       relative;
                        padding-top:    40px;
                        padding-bottom: 40px;
                    }
    
                            #nested-header, #nested-footer {
                                position:   absolute;
                                height:     40px;
                                width:      100%;
                                background: #CCC;
                            }
                                #nested-header {
                                    top: 0;
                                }
                                #nested-footer {
                                    bottom: 0;
                                }
    
                            #nested-content-wrap {
                                height: 100%;
                            }
                                #nested-floater {
                                    height: 100%;
                                    float:  left;
                                    width:  100px;
                                }
                                #nested-content {
                                    height:     100%;
                                    background: green;
                                    color:      black;
                                    overflow:   auto;
                                    position:   relative;
                                }
    
                                    #inner-nest {
                                        height:   100%;
                                        position: relative;
                                    }
                                        #inner-head {
                                            height:     30px;
                                            width:      100%;
                                            background: #AAA;
                                            position:   absolute;
                                            top:        0;
                                        }
                                        #inner-content {
                                            padding-top: 30px;
                                            height:      100%;
                                            overflow:    auto;
                                        }
    
                    .border-box {
                        behavior:           url("boxsizing.htc");
                        box-sizing:         border-box;
                        -moz-box-sizing:    border-box;
                        -webkit-box-sizing: border-box;
                    }
    
                    .content-box {
                        behavior:           url("boxsizing.htc");
                        box-sizing:         content-box;
                        -moz-box-sizing:    content-box;
                        -webkit-box-sizing: content-box;
                    }
    
                    legend {
                        color: black;
                    }
    
                    form {
                        margin: 1em 0;
                    }
    
                    .wrap {
                        height:     100px;
                        background: #000;
                        overflow:   hidden;
                    }
    
                    .test {
                        width:          100px;
                        height:         100%;
                        background:     #AAA;
                        border-color:   #EEE;
                        padding-left:   20px;
                        padding-top:    20px;
                        padding-bottom: 5px;
                        float:          left;
                    }
    
                    .fill {
                        width:      100%;
                        height:     100%;
                        background: #CCC;
                    }
    
                    .gauge {
                        width:        99px;
                        background:   white;
                        border-right: 1px solid green;
                        height:       100%;
                        float:        left;
                    }
    
                    .notes {
                        background: #8FC561;
                    }
    
                    .clear {
                        clear: both;
                    }
    
                    /* 120px x 120px square; this will create a black 20px frame on the inside */
                    .boxtest-wrapper {
                        width:      100px;
                        height:     100px;
                        float:      left;
                        background: black;
                        color:      white;
                        margin:     1em;
                        padding:    20px;
                    }
    
                    #boxtest-4-container {
                        width:  100%;
                        height: 100%;
                    }
    
                    .boxtest {
                        width:      100%;
                        height:     100%;
                        background: white;
                        color:      black;
                        border:     5px solid green;
                        overflow:   hidden;
                    }
            </style>
            <script type="text/javascript">
                function addBorderBox() {
                    var wrap1 = document.getElementById("wrap-1");
                    var wrap2 = document.getElementById("wrap-2");
    
                    var borderBox = document.createElement("div");
                    borderBox.className = "test border-box";
    
                    var borderBoxFill = document.createElement("div");
                    borderBoxFill.className = "fill";
    
                    var borderBoxContent = document.createTextNode("Generated border box fill");
    
                    borderBoxFill.appendChild(borderBoxContent);
                    borderBox.appendChild(borderBoxFill);
    
                    var gauge = document.createElement("div");
                    gauge.className = "gauge";
    
                    var gaugeText1 = "width: 100px";
                    var gaugeText2 = "height: 100%";
                    var gaugeText3 = "bottom should be visible";
    
                    gauge.appendChild(document.createTextNode(gaugeText1));
                    gauge.appendChild(document.createElement("br"));
                    gauge.appendChild(document.createTextNode(gaugeText2));
                    gauge.appendChild(document.createElement("br"));
                    gauge.appendChild(document.createTextNode(gaugeText3));
    
                    wrap1.appendChild(borderBox);
                    wrap2.appendChild(gauge);
                }
            </script>
        </head>
        <body id="body" class="border-box">
            <div id="header">
                <p>Header - 50px;</p>
            </div>
            <div id="content" class="border-box">
                <div id="nested-header">
                    <p>Nested Header - 40px;</p>
                </div>
                <div id="nested-content-wrap">
                    <div id="nested-floater">
                        <p>Float - 100px;</p>
                        <ul>
                            <li>This element should never scroll.</li>
                        </ul>
                    </div>
                    <div id="nested-content">
                        <div id="inner-nest">
                            <div id="inner-head">
                                <p>Inner Head - 30px;</p>
                            </div>
                            <div id="inner-content" class="border-box">
                                <div style="float: right; ">
                                    <p>The fourth square should look just like the other three:</p>
    
                                    <div id="boxtest-wrapper-1" class="boxtest-wrapper">
                                        <div id="boxtest-1" class="boxtest border-box"></div>
                                    </div>
                                    <div id="boxtest-wrapper-2" class="boxtest-wrapper">
                                        <div id="boxtest-2" class="boxtest border-box"></div>
                                    </div>
                                    <br class="clear" />
                                    <div id="boxtest-wrapper-3" class="boxtest-wrapper">
                                        <div id="boxtest-3" class="boxtest border-box"></div>
                                    </div>
                                    <div id="boxtest-wrapper-4" class="boxtest-wrapper">
                                        <div id="boxtest-4-container">
                                        <!-- boxtest-4-container isn't special in any way. it just has width and height set to 100%. -->
                                            <div id="boxtest-4" class="boxtest border-box"></div>
                                        </div>
                                    </div>
                                </div>
    
                                <p>Inner Content - fluid</p>
    
                                <ul>
                                    <li>The top of the scrollbar should be covered by the &ldquo;Inner Head&rdquo; element.</li>
                                    <li>The bottom of the scrollbar should be visible without having to scroll &ldquo;Inner Head&rdquo; out of view.</li>
                                </ul>
    
                                <p>Document Compat Mode:
                                    <strong id="compatMode">
                                        <script type="text/javascript">
                                            var compatMode = document.compatMode;
                                            if (compatMode != "CSS1Compat") {
                                                document.getElementById("compatMode").style.color = "red";
                                            }
                                            document.write(compatMode);
                                        </script>
                                    </strong>
                                </p><br />
    
                                <div class="notes">
                                    <h2>Notes</h2>
                                    <ul>
                                        <li>In IE6 and IE7 (and possibly IE8; untested), you'll notice a slight shift of contents that have <code>box-sizing</code> set to <code>border-box</code>. This is the amount of time it takes for <a href="box-sizing.htc">box-sizing.htc</a> to finish downloading.</li>
                                        <li>This workaround is not live. Anything that causes a <a href="http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/">reflow or repaint</a> will not currently trigger an update to widths and heights of <code>border-box</code> elements.</li>
                                        <li>See <a href="http://webfx.eae.net/dhtml/boxsizing/boxsizing.html">http://webfx.eae.net/dhtml/boxsizing/boxsizing.html</a> for the original solution to the IE6/IE7 <code>border-box</code> problem. <a href="box-sizing.htc">box-sizing.htc</a> has been modified to allow for percentage widths and heights.</li>
                                        <li>To see what this example should look like without the use of <a href="box-sizing.htc">box-sizing.htc</a>, view it in Firefox or IE8.</li>
                                    </ul>
                                </div>
    
                                <br class="clear" />
                                <form>
                                    <fieldset>
                                        <legend>DOM Update Test</legend>
                                        <input type="button" value="Click to add border-box" onclick="addBorderBox(); " />
                                    </fieldset>
                                </form>
    
                                <div id="wrap-1" class="wrap">
                                    <div class="test content-box" id="content-box-1" style="border-width: 5px; border-style: solid;">
                                        <div class="fill">Content box fill</div>
                                    </div>
                                    <div class="test content-box" id="content-box-2" style="border-width: 5px; border-style: solid; padding: 5px;">
                                        <div class="fill">Content box fill</div>
                                    </div>
                                    <div class="test border-box" id="border-box-1" style="border-width: 5px; border-style: solid;">
                                        <div class="fill">Border box fill</div>
                                    </div>
                                    <div class="test border-box" id="border-box-2" style="border-width: 5px; border-style: solid; padding: 5px;">
                                        <div class="fill">Border box fill</div>
                                    </div>
                                    <div class="test" id="default-box-1" style="border-width: 5px; border-style: solid;">
                                        <div class="fill">Default box fill</div>
                                    </div>
                                    <div class="test" id="default-box-2" style="border-width: 5px; border-style: solid; padding: 5px;">
                                        <div class="fill">Default box fill</div>
                                    </div>
                                </div>
                                <div id="wrap-2" class="wrap">
                                    <!-- subtract 1 from width for 1px right border -->
                                    <div class="gauge" style="width: 129px;">width: 130px<br />height: 100%<br />bottom should be cut off</div>
                                    <div class="gauge" style="width: 119px;">width: 120px<br />height: 100%<br />bottom should be cut off</div>
                                    <div class="gauge">width: 100px<br />height: 100%<br />bottom should be visible</div>
                                    <div class="gauge">width: 100px<br />height: 100%<br />bottom should be visible</div>
                                    <div class="gauge" style="width: 129px;">width: 130px<br />height: 100%<br />bottom should be cut off</div>
                                    <div class="gauge" style="width: 119px;">width: 120px<br />height: 100%<br />bottom should be cut off</div>
                                </div>
                                <br class="clear" />
    
                                <script type="text/javascript">
                                    var lipsum = "<p>Lorem ipsum dolor sit amet.</p>";
    
                                    for (var i = 0; i < 100; i++) {
                                        document.write(lipsum);
                                    }
                                </script>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="nested-footer">
                    <p>Nested Footer - 40px;</p>
                </div>
            </div>
            <div id="footer">
                <p>Footer - 50px;</p>
            </div>
        </body>
    </html>
    

    【讨论】:

    • 有趣!我不完全确定通过parseInt 读取边框和填充值的尝试...如何从clientWidth 中减去style.pixelWidth(高度相同)来计算调整像素大小的程度更可靠?
    • 我整理了一个测试套件作为我在工作中工作的概念证明。我尝试了许多不同的边框+填充变体,一切都刚刚好。考虑到边框框的概念包括边框和填充作为宽度/高度的一部分,对我来说,宽度和高度的计算方式是按此处的方式计算的。从概念上讲。
    • 话虽如此,您确实提出了一个有效的观点。这样,当我的需求最终需要它时,我就不必为em、pt 等编写转换器。
    • 每当我使用基于百分比的宽度或高度时,我都会得到0 for style.pixelWidth。这可能就是为什么它从来没有那样做。
    • 我只是简化了计算空间以填充百分比大小的框的代码。我还添加了一个测试页面。
    【解决方案4】:

    如果通过覆盖页面的一部分,您的意思是显示在 iframe 中的页面,一种想法可能是使用 CSS 中的 margin-top: 属性为 iframe 添加上边距。鉴于您正确限制了 iframe 的高度,这将消除滚动条。

    【讨论】:

      【解决方案5】:

      Android Kotlin 答案

      例如,我是这样使用 WebView 的 iFrame 的 padding:

      val url = "www.stackoverflow.com"
      
      val iframeExample = "<html><body style=\"margin: 0; padding: 0\"><iframe width=\"100%\" src=\"$url\" frameborder=\"0\" allowfullscreen></iframe></body></html>"
      
      webView.loadData(iframeExample, "text/html", "utf-8")
      

      【讨论】:

        猜你喜欢
        • 2012-04-23
        • 2012-10-28
        • 2016-08-09
        • 1970-01-01
        • 2010-10-03
        • 1970-01-01
        • 2022-06-15
        • 1970-01-01
        • 2012-04-09
        相关资源
        最近更新 更多