導航欄和iframe之間的空白

Question

有人可以請幫助 我會遇到下面的CSS和HTML，這很好。但我唯一的問題是navbar和iframe之間的空白欄。瀏覽谷歌，看看是什麼導致它沒有成功。 （也可能是與沒有一個線索做什麼IM）

這裏是樣式CSS

/* -------------------------------- 

Primary style 

-------------------------------- */ 
*, *::after, *::before { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

*::after, *::before { 
    content: ''; 
} 

body { 
    font-size: 100%; 
    font-family: "PT Sans", sans-serif; 
    color: #f8f7ee; 
    background-color: #f8f7ee; 
} 

a { 
    color: #f05451; 
    text-decoration: none; 
} 

/* -------------------------------- 

Main components 

-------------------------------- */ 
header { 
    position: relative; 
    height: 160px; 
    line-height: 180px; 
    text-align: center; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 
header h1 { 
    font-size: 20px; 
    font-size: 1.25rem; 
} 


.cd-tabs { 
    position: relative; 
    width: 100%; 
    height:100%; 

} 
.cd-tabs:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 
.cd-tabs::after { 
    /* subtle gradient layer on top right - to indicate it's possible to scroll */ 
    position: absolute; 
    top: 0; 
    right: 0; 
    height: 60px; 
    width: 50px; 
    z-index: 1; 
    pointer-events: none; 
    background: -webkit-linear-gradient(right , #f8f7ee, rgba(248, 247, 238, 0)); 
    background: linear-gradient(to left, #f8f7ee, rgba(248, 247, 238, 0)); 
    visibility: visible; 
    opacity: 1; 
    -webkit-transition: opacity .3s 0s, visibility 0s 0s; 
    -moz-transition: opacity .3s 0s, visibility 0s 0s; 
    transition: opacity .3s 0s, visibility 0s 0s; 
} 
.no-cssgradients .cd-tabs::after { 
    display: none; 
} 
.cd-tabs.is-ended::after { 
    /* class added in jQuery - remove the gradient layer when it's no longer possible to scroll */ 
    visibility: hidden; 
    opacity: 0; 
    -webkit-transition: opacity .3s 0s, visibility 0s .3s; 
    -moz-transition: opacity .3s 0s, visibility 0s .3s; 
    transition: opacity .3s 0s, visibility 0s .3s; 
} 
.cd-tabs nav { 
    overflow: auto; 
    -webkit-overflow-scrolling: touch; 
    background: #f8f7ee; 
    box-shadow: inset 0 -2px 3px rgba(203, 196, 130, 0.06); 
} 

@media only screen and (min-width: 960px) { 
    .cd-tabs nav { 
    position: relative; 
    float: none; 
    background: transparent; 
    box-shadow: none; 
    } 
} 

.cd-tabs-navigation { 
    width: 360px; 
} 
.cd-tabs-navigation:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 
.cd-tabs-navigation li { 
    float: left; 
} 
.cd-tabs-navigation a { 
    position: relative; 
    display: block; 
    height: 60px; 
    width: 60px; 
    text-align: center; 
    font-size: 12px; 
    font-size: 0.75rem; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
    font-weight: 700; 
    color: #c3c2b9; 
    padding-top: 34px; 
} 
.no-touch .cd-tabs-navigation a:hover { 
    color: #29324e; 
    background-color: rgba(233, 230, 202, 0.3); 
} 
.cd-tabs-navigation a.selected { 
    background-color: #ffffff !important; 
    box-shadow: inset 0 2px 0 #000000; 
    color: #29324e; 
} 

.plex { 
    background-color: #ffffff !important; 
    box-shadow: inset 0 1px 0 #000000; 
    color: #29324e; 
} 

.cd-tabs-navigation a::before { 
    /* icons */ 
    position: absolute; 
    top: 12px; 
    left: 50%; 
    margin-left: -10px; 
    display: inline-block; 
    height: 20px; 
    width: 20px; 
    background-image: url("../img/vicons.svg"); 
    background-repeat: no-repeat; 
} 
.cd-tabs-navigation a[data-content='inbox']::before { 
    background-position: 0 0; 
} 
.cd-tabs-navigation a[data-content='new']::before { 
    background-position: -20px 0; 
} 
.cd-tabs-navigation a[data-content='gallery']::before { 
    background-position: -40px 0; 
} 
.cd-tabs-navigation a[data-content='store']::before { 
    background-position: -60px 0; 
} 
.cd-tabs-navigation a[data-content='settings']::before { 
    background-position: -80px 0; 
} 
.cd-tabs-navigation a[data-content='trash']::before { 
    background-position: -100px 0; 
} 
.cd-tabs-navigation a[data-content='dog']::before { 
    background-position: -120px 0; 
} 
.cd-tabs-navigation a[data-content='inbox'].selected::before { 
    background-position: 0 -20px; 
} 
.cd-tabs-navigation a[data-content='new'].selected::before { 
    background-position: -20px -20px; 
} 
.cd-tabs-navigation a[data-content='gallery'].selected::before { 
    background-position: -40px -20px; 
} 
.cd-tabs-navigation a[data-content='store'].selected::before { 
    background-position: -60px -20px; 
} 
.cd-tabs-navigation a[data-content='settings'].selected::before { 
    background-position: -80px -20px; 
} 
.cd-tabs-navigation a[data-content='trash'].selected::before { 
    background-position: -100px -20px; 
} 
.cd-tabs-navigation a[data-content='dog'].selected::before { 
    background-position: -120px -20px; 
} 

@media only screen and (min-width: 960px) { 
    .cd-tabs-navigation { 
    /* tabbed on top on big devices */ 
    width: auto; 
    background-color: #f8f7ee; 
    box-shadow: inset 0 -2px 3px rgba(203, 196, 130, 0.06); 
    } 
    .cd-tabs-navigation a { 
    height: 60px; 
    line-height: 60px; 
    width: auto; 
    text-align: left; 
    font-size: 14px; 
    font-size: 0.875rem; 
    padding: 0 2.8em 0 4.6em; 
    } 
    .cd-tabs-navigation a.selected { 
    box-shadow: inset 0 2px 0 #ffffff; 
    } 
    .cd-tabs-navigation a::before { 
    top: 50%; 
    margin-top: -10px; 
    margin-left: 0; 
    left: 38px; 
    } 
} 

.cd-tabs-content { 
    background: #ffffff; 
    height:100%; 
    border:0; 

} 
.cd-tabs-content li { 
    display: none; 

} 
.cd-tabs-content li.selected { 
    display: block; 
    -webkit-animation: cd-fade-in 0.5s; 
    -moz-animation: cd-fade-in 0.5s; 
    animation: cd-fade-in 0.5s; 
} 
.cd-tabs-content li p { 
    font-size: 14px; 
    font-size: 0.875rem; 
    line-height: 1.6; 
    color: #8493bf; 
    height:100%; 
} 

@media only screen and (min-width: 960px) { 
    .cd-tabs-content { 
    min-height: 1000px; 
    } 
    .cd-tabs-content li { 

    } 
    .cd-tabs-content li p { 
    font-size: 16px; 
    font-size: 1rem; 
    } 
} 

@-webkit-keyframes cd-fade-in { 
    0% { 
    opacity: 0; 
    } 
    100% { 
    opacity: 1; 
    } 
} 
@-moz-keyframes cd-fade-in { 
    0% { 
    opacity: 0; 
    } 
    100% { 
    opacity: 1; 
    } 
} 
@keyframes cd-fade-in { 
    0% { 
    opacity: 0; 
    } 
    100% { 
    opacity: 1; 
    } 
} 

這裏是HTML

<!doctype html> 
<html lang="en" class="no-js"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'> 

    <link rel="stylesheet" href="css/reset.css"> <!-- CSS reset --> 
    <link rel="stylesheet" href="css/style.css"> <!-- Resource style --> 
    <script src="js/modernizr.js"></script> <!-- Modernizr --> 


    <title>Responsive Tabbed Navigation | CodyHouse</title> 
</head> 
<body> 
<div class="cd-tabs"> 
    <nav> 
     <ul class="cd-tabs-navigation"> 
      <li><a data-content="inbox" class="selected" href="#0">NZBGet</a></li> 
      <li><a data-content="new" href="#0">CouchPotato</a></li> 
      <li><a data-content="gallery" href="#0">Sonarr</a></li> 
      <li><a data-content="store" href="#0">PlexPy</a></li> 
      <li><a data-content="settings" href="#0">PlexRequests</a></li> 
      <li><a data-content="trash" href="#0">Plex</a></li> 
      <li><a data-content="dog" href="#0">DogNZB</a></li> 

     </ul> <!-- cd-tabs-navigation --> 
    </nav> 

    <ul height="100%" class="cd-tabs-content"> 
     <li data-content="inbox" class="selected"> 
      <iframe width="100%" height="1000px" src="NZB GET URL HERE" style="border:none"></iframe> 
     <li data-content="new"> 
      <iframe width="100%" height="1000px" src="COUCHPOTATO URL HERE" style="border:none"></iframe> 
     <li data-content="gallery"> 
      <iframe width="100%" height="1000px" src="SONARR URL HERE" style="border:none"></iframe> 

     <li data-content="store"> 
      <iframe width="100%" height="1000px" src="PLEXPY URL HERE" style="border:none"></iframe> 
     </li> 

     <li data-content="settings"> 
     <iframe width="100%" height="1000px" src="PLEXREQUESTS URL HERE" style="border:none"></iframe> 
     <li data-content="trash"> 
      <iframe width="100%" height="1000px" src="PLEX URL HERE" style="border:none"></iframe> 
     </li> 
     <li data-content="dog"> 
      <iframe width="100%" height="1000px" src="DOG NZB HERE OR ANY OTHER INDEXER" style="border:none"></iframe> 
     </li> 
    </ul> <!-- cd-tabs-content --> 
</div> <!-- cd-tabs --> 

<script src="js/jquery-2.1.1.js"></script> 
<script src="js/main.js"></script> <!-- Resource jQuery --> 
</body> 
</html> 

我會很感激的幫助

Answer 1

我會嘗試添加display:block;款式到您的iframe的