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代碼以最大限度地減少網頁中的額外空間

回答

相關問題