Question

使用下面的代码，我试图达到以下设计：
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>

问题：
1. iframe底部那个薄的蓝色“填充”空间来自哪里？如何强迫它永远不会出现？
2.是否有可能在没有以下情况下达到此设计：a）使用javascript; b）使用CSS box-sizing属性？

Answer 1

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

在display: block;上设置iframe应修复填充。

修改：这里的 an updated version of @syedmohsin's jsFiddle ，它摆脱了box-sizing，并为您解决了80% width/70% height问题。

<强> 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;
    }
}

Answer 2

iframe被视为内联元素，因此表格单元格将其与基线对齐（并为下降器留下一些空间）。您可以看到内嵌图像的类似效果。

在display: block上设置iframe ...或line-height: 0上的td

奇怪的＆＃34;填充＆＃34;效果在表格单元格中的iframe底部

2 个答案: