Javascript “奇怪”；填充“；表格单元格中iframe底部的效果_Javascript_Jquery_Css_Iframe

Javascript “奇怪”；填充“；表格单元格中iframe底部的效果

javascript jquery css iframe

Javascript “奇怪”；填充“；表格单元格中iframe底部的效果,javascript,jquery,css,iframe,Javascript,Jquery,Css,Iframe,通过下面的代码，我试图达到以下设计： 1.表格宽度/高度必须为浏览器窗口的80%/70%。其左侧单元格必须为40%宽。 2.右单元格中的Iframe必须填充所有可用空间，并且永远不要超出单元格的内边框 <!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title></title> <style> body {width:100%} if

通过下面的代码，我试图达到以下设计：
1.表格宽度/高度必须为浏览器窗口的80%/70%。其左侧单元格必须为40%宽。
2.右单元格中的Iframe必须填充所有可用空间，并且永远不要超出单元格的内边框

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<style>
    body {width:100%}
    iframe {width:100%; overflow:auto; margin:0px; border:solid 2px red; background-color:white; -moz-box-sizing:border-box; box-sizing:border-box}
    table {width:80%}
    table, td {margin:0px; padding:0px; border:solid 1px black}
</style>
<script src="jquery.js"></script>
</head>
<body>
    <table>
        <tbody>
            <tr>
                <td style="width:40%">Cell 1</td>
                <td style="background-color:blue">
                    <iframe src='iframe.htm'></iframe>
                </td>
            </tr>
        </tbody>
    </table>
<script>
    $(window).load(function() {
        $('iframe').height($(window).height()*0.7);
    });
</script>
</body>
</html>


正文{宽度：100%}
iframe{width:100%；溢出：自动；边距：0px；边框：实心2px红色；背景色：白色；-moz框大小：边框框；框大小：边框框}
表{宽度：80%}
表，td{边距：0px；填充：0px；边框：实心1px黑色}
第1单元
$（窗口）。加载（函数（）{
$（'iframe'）.height（$（window）.height（）*0.7）；
});

问题：
1.iframe底部的蓝色“填充”空间从何而来？如何强制它永远不出现？

2.是否有可能在不使用javascript的情况下实现这种设计；b）使用CSS

框大小调整

属性

iframe

是“内联框架”的缩写，内联元素位于周围文本的基线上。基线允许下行（g的尾部等），空白是下行所占用的空间（即使没有）

设置<代码>显示：块iframe上的code>应修复填充

编辑：这里是，它摆脱了

框大小的限制

并为您解决了

80%宽度/70%高度的问题
CSS
html, body {
    width:100%;
    height: 100%;
}
iframe {
    display:block;
    overflow:auto;
    border:solid 2px red;
    width: 100%;
    height: 100%;
    margin:0;
}
table {
    width:80%;
    height: 70%;
}
table, td {
    margin:0px;
    padding: 0px;
    border:solid 1px black;
}
td {
    height: 100%;
    padding: 0 3px 2px 0;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    td {
        padding: 0 3px 0px 0;
    }
}
@media screen\0 {
    td {
        padding: 0 3px 0px 0;
    }
}    

iframe
被视为一个内联元素，因此表格单元格将其与基线对齐（并为下行程序留出一点空间）。您可以在内联图像中看到类似的效果
在iframe
上设置display:block
。。。或者行高：0
在td
上是的，那是我的匆忙，我忘记了行高和内联元素交互。。。现在我想知道如何摆脱框大小：边框框
。。。如果我将此属性用于此设计，有哪些注意事项？我认为您可以使用框大小调整
，我相信所有浏览器都支持您需要使用的位（将边框移动到iframe
框的内部）。如果你真的不想使用它，这里有一个例子，它使用一些特定于浏览器的技巧来添加额外的填充以适应边框。