使用下面的代码,我试图达到以下设计:
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
属性?
iframe
是"inline frame"的缩写,行内元素位于周围文本的基线上。基线允许下降('g'的尾部等),空白是下降所占用的空间(即使没有)。
在iframe
上设置display: block;
,可以固定填充。
编辑:这里是一个更新版本的@syedmohsin的jsFiddle,它摆脱了box-sizing
,它为你修复了80% width/70% height
的问题。
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 {
td {
padding: 0 3px 0px 0;
}
}
iframe
被视为内联元素,因此表格单元格将其与基线对齐(并为下降器留下一点空间)。您可以在内联图像中看到类似的效果。
在iframe
上设置display: block
…或line-height: 0
在td