奇怪的“padding"在表格单元格中iframe底部的效果
strange "padding" effect at the bottom of an iframe in a table cell
使用下面的代码,我试图达到以下设计:
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'0 {
td {
padding: 0 3px 0px 0;
}
}
iframe
被视为内联元素,因此表格单元格将其与基线对齐(并为下降器留下一点空间)。您可以在内联图像中看到类似的效果。
在iframe
上设置display: block
…或line-height: 0
在td
相关文章:
- 使用jquery在单击时在单元格中输入值
- CSS-若窗口太小,滚动条会出现在“表格”单元格上
- 可以'我不明白为什么;t将行和单元格添加到表中
- 如何在Angular中的表的所有单元格中添加链接
- 表中单元格的总和
- ExtJS网格单元格编辑器,防止焦点松动问题
- 有没有一种方法可以仅使用HTML/CSS来隐藏基于特定值的数据单元格
- 区分电子表格中的空单元格和0值
- ui网格将单元格显示为选择标记
- 单元格的工具提示或标题不显示超过2000个字符
- ui网格日期单元格过滤器,过滤日期格式导致显示错误的日期
- 允许表单元格内容水平展开
- 如何将jQuery/AAJAX结果放入表格单元格
- 使用jQuery只返回选中复选框后的第一个表单元格值
- jQuery-通过AJAX调用动态添加具有值的表单元格
- 需要将单元格值复制到html表中的其他单元格中
- 从Javascript中选定的行中获取特定单元格的值
- 使用JavaScript获取Gridview单元格值
- 奇怪的“padding"在表格单元格中iframe底部的效果
- 如何在mxGraph的Iframe中获得选定的单元格值