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

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

希望有所帮助。

尝试使用div和＆amp ;;来实现格式化css而不是表格

1 个答案: