ウェブページの余分なスペースを最小限に抑えるためのhtml/CSSコード

Question

私のウェブページには複数のタブがあり、各タブにはいくつかのコンテンツがhtmlファイルに含まれています。 ユーザーがTab1をクリックすると、私は下のフィドルに示すように画像が付いているボックスはほとんど表示していません。 Code Demo here

ボックスが表示され、バーが表示され、いくつかの見出しが表示された後で、見出しバーの後に未使用スペースがたくさん表示されることがあります。それらの不要なギャップをボックスの前後で削除する方法を提案してください。表示されるタブのコンテンツを最小限に抑えたいですか？ 問題は同じままですが、高さを最小限に抑えようとしました。

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> 

Answer 1

これはあなたが

Plunker

探しているものであれば親切に見る私はちょうどあなたが<table>要素に与えていたインライン高さを取り除きますtab1.htmlファイル それはあなたが余分なスペースを得ていた理由でした。