1

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

4

2 回答 2

8

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;
    }
}
于 2013-05-31T03:50:42.410 回答
1

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

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

于 2013-05-31T03:53:49.317 回答