Question

我的网页有多个标签，每个标签都有一些内容包含在html文件中。当用户点击Tab1时，我显示几个带有图像的框，如下面的小提琴所示。 Code Demo here

我们可以在显示方框之前和之后注意页面中的更多空间，并且有一个显示有一些标题的条形图，在标题栏之后还可以看到大量未使用的空间。请建议如何在框之前和之后删除那些不需要的间隙。我不想最小化标签内容显示区域。虽然问题仍然存在，但我尝试尽量减少高度。

HTML code：

<div class="tabs">
   <div class="tab">
        <input type="radio" id="tab-1" name="tab-group-1" checked>
        <label for="tab-1">Tab1</label>

         <div class="content" style="width:700px;height:700px;">
           <!-- <embed type="text/html" src="summary.html"> -->
             <iframe src="tab1.html" width="100%" height="100%"></iframe>
        </div>
    </div>

    <div class="tab">
        <input type="radio" id="tab-2" name="tab-group-1">
        <label for="tab-2">Tab2</label>
        <div class="content">
           <iframe src="tab2.html" width="100%" height="100%"></iframe>
        </div>
    </div>
    <div class="tab">
        <input type="radio" id="tab-3" name="tab-group-1">
        <label for="tab-3">Tab3</label>
        <div class="content">
           <iframe src="tab3.html" width="100%" height="100%"></iframe>
        </div>
    </div>
</div>

Answer 1

请查看这是否是您要找的内容

Plunker

我刚删除了您为tab1.html文件中的<table>元素指定的内联高度。这就是你获得额外空间的原因。

html / CSS代码，以尽量减少网页中的额外空格

1 个答案: