尝试仅使用 divs 和 css 而不是表格实现格式化

Question

有没有办法只用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>

Answer 1

这把小提琴将展示如何实现这一目标。首先是你的原始代码，然后是我如何重新创建它：

.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%; }

希望有帮助。