css - 尝试仅使用 div 和 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%; }

希望有帮助。