html/CSS代码以最大限度地减少网页中的额外空间

我的网页有多个选项卡，每个选项卡都包含一些通过html文件包含的内容。当用户点击Tab1时，我显示了几个带有图像的框，如下面的小提琴所示。 Code Demo here html/CSS代码以最大限度地减少网页中的额外空间

在标题栏显示前后，我们可以在页面上看到更多的空间，并且在标题栏中还可以看到很多未使用的空间。请建议如何删除这些不必要的空白前后的框。我不想最小化标签内容显示区域。我尽量减少高度，尽管问题保持不变。

HTML代码：

<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>

来源

2016-12-15 joann

欢迎来到Stack Overflow！寻求代码帮助的问题必须包含在问题本身中重现**所需的最短代码**最好在[** Stack Snippet **]中（https://blog.stackoverflow.com/2014/09/introducing-runnable） -javascript-CSS-和HTML的代码段/）。请参阅[**如何创建最小，完整和可验证的示例**]（http://stackoverflow.com/help/mcve） –

您是否在使用引导程序？ http://getbootstrap.com/ Bootstrap网格系统对于这种事情是很好的。 – nurdyguy

@nurdyguy - 不，我们没有使用任何框架。我需要使用html，css，javascript来实现这一点。我想要减少在显示图像的方框之前和之后看到的额外空间，以及在带标题的方框之后显示的空间。请看小提琴：https://plnkr.co/edit/Xs9C9eWKUYBI32hXqSWc?p=preview – joann

请看看这是你在找什么

Plunker

我只是删除你已在<table>元素给出的直列高度tab1.html文件。这就是你得到额外空间的原因。

来源

2016-12-15 17:57:26

html/CSS代码以最大限度地减少网页中的额外空间

回答

相关问题