ipad /タブレットで見ているフッタの後の大規模なデッドスペース

Question

私は本当にここでいくつかの助けが必要です。多少の理由から、私はipadでウェブサイトを見ると、フッターの後で、頑丈で大量のデッドスペースが得られます。私は写真とコードを添付しました。助けていただければ幸いです。

乾杯XOXO

html, body{ 
    margin:0em; 
    padding:0em; 
    font-size: 100%; 
} 
/* ---------------------Navigation-------------------------*/ 
ul{ 
    margin:0; 
    padding: 0; 
    display: inline-block; 
    position: fixed; 
    list-style-type: none; 
    text-decoration: none; 
    width: 100%; 
    background-color:white; 
    border-bottom: 0.063em lightgrey solid; 
    z-index: 20; 
} 

ul li {float: left; 
width: 20%;} 

ul li a{display: inline-block; 
    color: #f2f2f2; 
    text-align: center; 
    text-decoration: none; 
    padding-bottom: 0.400em; 
    padding-top: 0.400em; 
    transition: 0.4s; 
    font-size: 1.063em; 
    width: 100%; 
    height: 2%; 
    color: black; 
    z-index: 20; 
} 

li{text-align:center; 
color: black;} 

ul li a:hover {background-color: #ffbc00;} 

/* ---------------------Navigation End-------------------------*/ 

/* --------------------- Mobile Start------------------*/ 

@media only screen and (max-width: 800px) { 
    body{font-size:60%;} 
} 

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio: 4) {body{font-size: 80%;} } 
} 

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { body{font-size: 80%}} 

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {.pick-a, .pick-b, .pick-c{display: block;float: none;}} 

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) {body{font-size: 45%}} 

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : portrait) { body{font-size: 31%} } 


/* --------------------- Mobile End------------------*/ 
/* ---------------------Main Body Start--------------*/ 
.main-body{ 
width: 100%; 
height: 38.125em; 
display: inline-block; 
} 

.pick-a, .pick-b, .pick-c{ 
width: 33%; 
height: 100%; 
float: left; 
display: inline-block; 
border: 0.063em solid black; 
text-align: center; 
} 


.pick-a{ 
background-image: url("http://s20.postimg.org/nyc3bxswt/photo_1431605695381_f4a9c3cdd150.jpg"); 
background-size: cover; 
background-position: center; 
background-repeat: no-repeat;} 

.pick-a:hover { 
    -webkit-transform:scale(1.25); /* Safari and Chrome */ 
    -moz-transform:scale(1.25); /* Firefox */ 
    -ms-transform:scale(1.25); /* IE 9 */ 
    -o-transform:scale(1.25); /* Opera */ 
    transform:scale(1.25); 
} 

.pick-b{ 
background-image: url("http://s20.postimg.org/9ug83jlp9/photo_1457904375453_3e1fc2fc76f4.jpg"); 
background-size: cover; 
background-position: center; 
background-repeat: no-repeat;} 

.pick-b:hover { 
    -webkit-transform:scale(1.25); /* Safari and Chrome */ 
    -moz-transform:scale(1.25); /* Firefox */ 
    -ms-transform:scale(1.25); /* IE 9 */ 
    -o-transform:scale(1.25); /* Opera */ 
    transform:scale(1.25); 
} 

.pick-c{background-image: url("http://s20.postimg.org/n6no1c9st/photo_1427751840561_9852520f8ce8.jpg"); 
background-size: cover; 
background-position: center; 
background-repeat: no-repeat;} 

.pick-c:hover{ 
    -webkit-transform:scale(1.25); /* Safari and Chrome */ 
    -moz-transform:scale(1.25); /* Firefox */ 
    -ms-transform:scale(1.25); /* IE 9 */ 
    -o-transform:scale(1.25); /* Opera */ 
    transform:scale(1.25); 
} 

.circle-a{ 
    width: 30%; 
    height: 20%; 
    border: 0.063em solid #f8353e; 
    margin: 0 auto; 
    border-radius: 50%; 
    margin-top: 20%; 
    background-image: url("http://s20.postimg.org/6x686jwyl/animat_network_color.gif"); 
background-size: contain; 
background-position: center; 
} 

.circle-b{width: 30%; 
    height: 20%; 
    border: 0.063em solid #f59f36; 
    margin: 0 auto; 
    border-radius: 50%; 
    margin-top: 20%; 
    background-image: url("http://s20.postimg.org/5orjcejrx/animat_rocket_color.gif"); 
background-size: contain; 
background-position: center;} 

.circle-c{width: 30%; 
    height: 20%; 
    border: 0.063em solid green; 
    margin: 0 auto; 
    border-radius: 50%; 
    margin-top: 20%; 
    background-image: url("http://s20.postimg.org/c50i2hsbh/animat_barchart_color.gif");  
background-size: contain; 
background-position: center;} 

/* ---------------------Main Body End------------------*/ 
/* ---------------------Footer Start---------------------------*/ 
.footer{ 
    height:12.500em; 
    width: 100%; 
    background-color: #414141; 
    margin-top: -0.5%; 
} 

.logo-buttons{ 
    width: 20%; 
    height: 30%; 
    margin: 0 auto; 
} 

.xing{ 
width: 100%; 
height:100%; 
background-image: url("http://s20.postimg.org/9vizr66fx/XING_grau_180_180_180.png"); 
background-position: center; 
background-size: contain; 
border-radius: 50%; 
} 

.linkedin{ 
width: 100%; 
height:100%; 
background-image: url("http://s20.postimg.org/m1csfbajh/linkedin.png"); 
background-position: center; 
background-size: contain; 
border-radius: 50%;} 

.twitter{ 
width: 100%; 
height:100%; 
background-image: url("http://s20.postimg.org/s3kf5syzh/twitter_512.png"); 
background-position: center; 
background-size: contain; 
border-radius: 50%; 
background-size: 67%; 
background-repeat: no-repeat; 
} 

.network-buttons{ 
    width: 20%; 
    height: 80%; 
    border-radius: 50%; 
    display: inline-block; 
    position: relative; 
    left: 13%; 
    margin-top: 6%; 
    padding-right: 10%; 
} 

.table-links{ 
width: 40%; 
height: 60%; 
margin:0 auto; 
} 

table{ 
margin: 0 auto; 
text-align: center; 
margin-top: 5%; 
} 

.footer-th{font-family: 'Roboto', sans-serif;font-size: 1.125em;color:white;font-weight: 400;padding: 4%;} 

.footer-td{font-family: 'Roboto', sans-serif;font-size: 0.875em;color:#ababab;;font-weight: 400;} 


/* ---------------------Footer End---------------------*/ 
/* ---------------------Fonts Start---------------------*/ 

h1{font-family: 'Roboto Slab', serif;color: #444; font-weight: 300;letter-spacing: -.2px; font-size: 3.000em;} 

h2{font-family: 'Roboto Slab', sans-serif;font-size: 2.375em;color: #444;font-weight: 300;letter-spacing: -.1px;} 

h3{font-family: 'Roboto',sans-serif;font-weight: 400;color:#444;font-size: 1.375em;} 

h4{font-family: 'Roboto', sans-serif;font-size: 1.200em;color: #848484;font-weight: 400;} 

h5{font-family: 'Montserrat', sans-serif;color: white; font-size: 1.875em; font-weight: 400;letter-spacing: -.02em;} 

p{font-family: 'Roboto', sans-serif;font-size: 1.125em;color: #848484; font-weight: 300;} 
/* ---------------------Fonts End---------------------*/ 

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="choose.css"/> 
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'> 
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> 
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> 
<link href='https://fonts.googleapis.com/css?family=Montserrat:700' rel='stylesheet' type='text/css'> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Jobs</title> 
</head> 
<body> 
<ul> 
    <li><a href=""><span style="font-family: 'Roboto', sans-serif;font-size: 1.000em;color: #444;font-weight: 400;">F<span style="color:#ff5252;font-size:1.000em;">.</span>LINT</span></a></li> 
    <li><a href="#test"><span style="font-family: 'Roboto', sans-serif;font-size: 1.000em;color: #444;font-weight: 400;"><span style="color:#ff5252;font-size:0.625em;">LIVE </span>JOBS</span></a></li> 
    <li><a href=""><span style="font-family: 'Roboto', sans-serif;font-size: 1.000em;color: #444;font-weight: 400;">EXPERTISE</span></a></li> 
    <li><a href=""><span style="font-family: 'Roboto', sans-serif;font-size: 1.000em;color: #444;font-weight: 400;">KONTAKT</span></a></li> 
    <li><a href=""><span style="font-family: 'Roboto', sans-serif;font-size: 1.000em:color: #444;font-weight: 400;">FAQs</span></a></li> 
</ul> 
    <div class="wrapper"> 
    <div class="main-body"> 
    <div class="pick-a"><div class="circle-a"></div><h5>WEBANALYTICS</h5></div> 
    <div class="pick-b"><div class="circle-b"></div><h5>DATA SCIENCE</h5></div> 
    <div class="pick-c"><div class="circle-c"></div><h5>BUSINESS INTELLIGENCE</h5></div> 
    </div></div> 
<div class="footer"> 
    <div class="logo-buttons"> 
     <div class="network-buttons"><div class="xing"></div></div> 
     <div class="network-buttons"><div class="linkedin"></div></div> 
     <div class="network-buttons"><div class="twitter"></div></div> 
    </div> 
    <div class="table-links"> 
     <table> 
      <thead> 
       <tr> 
        <th class="footer-th">HOME</th> 
        <th class="footer-th">EXPERTISE</th> 
        <th class="footer-th">KONTAKT</th> 
        <th class="footer-th">JOBS</th> 

       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td class="footer-td">FAQs</td> 
        <td class="footer-td">IMPRESSUM</td> 
        <td class="footer-td">REFERRAL</td> 
        <td class="footer-td">BLOG</td> 
        </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 
</div> 
</body> 
</html> 

] 1

Answer 1

あなたのコードは大丈夫ですが、iPadとモバイル上の変更が行われる必要がありながら、ポイントがコンテンツ領域は、いくつかの量を少し持っています空白を占めるように設定します。

@media only screen and (max-width: 991px) { 
.pick-a, .pick-b, .pick-c { width: 1000%; } 
} 

Answer 2

footer { 
height: 12.500em; 
width: 100%; 
background-color: #414141; 
margin-top: 12.5%; 
} 

マージントップが変更されます。

Answer 3

すべての回答に感謝します。私の愛を送る！私はあなたの提案を試みたが、それは何とか私のためのトリックをしなかった。しかし、私はemを使っていたので、実際にはメディアクエリーのフォントサイズで遊んでしまった。私はメディアクエリのフォントサイズを100％に増やし、それは私のために働いて、私はデッドスペースなしでフルスクリーン（ipadなど）を手に入れました！私は自分のコーディングでemを単独で使用したという事実を考えれば、デッドスペースは固定されたpx参照の不足のために作成されたと思います。とにかく助けをもう一度歓迎します。私は株式流通を盛んにするためにも貢献していきます。コーディングを続けてください！すべてのベストA.！