有没有一种方法可以仅使用 css 和 div 而不是我正在使用的表格来实现此 iframe 的位置和格式?我厌倦了使用 3 个单独的 div 并将 css 应用于它们,只能部分实现这种格式,但是 iframe 的底部会溢出并且无法查看包含页面的底部内容。
<style>
body {
margin:0;
background-color:#efefef;
}
.frame{
width:100%;
height:100%;
margin:0px;
border-spacing:0;
border-collapse:collapse;
overflow:hidden;
}
.frame_leftspace{
width:250px;
}
.frame_topspace{
height:70px;
}
</style>
<table class="frame" width="100%">
<tr>
<td class="frame_topspace" colspan="2"></td>
</tr>
<tr>
<td class="frame_leftspace"></td>
<td>
<iframe style="width:100%; height:100%;" src="http://www.reddit.com/" frameborder="0"></iframe>
</td>
</tr>
</table>
最佳答案
This fiddle将展示如何实现这一目标。首先是您的原始代码,然后是我将如何重新创建它:
HTML:
<div class="topspace"></div>
<div class="iframe">
<iframe id="reddit" src="http://www.reddit.com/" frameborder="0"></iframe>
</div>
CSS:
.topspace { height: 70px; }
.iframe { padding-left: 250px; }
#reddit { height: 100%; width: 100%; }
希望对您有所帮助。
关于css - 尝试仅使用 div 和 css 而不是表格来实现格式化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19897837/