網站背景顏色不填充屏幕移動

在製作我的網站時，我注意到在筆記本電腦/臺式機上它很好，但是當我在移動設備上看它時，底部會留下一個很大的白色空隙，牛逼彈力夠，我S8在人像模式中使用它時，背景不覆蓋整個屏幕網站背景顏色不填充屏幕移動

CSS：

html { 
overflow: hidden; 
height: 100%; 
} 

body { 
height: 100%; 
overflow: auto; 
} 
#background { 
background-color: #ffff34; 
background-size:  cover;     
background-repeat: no-repeat; 
background-position: center center; 
min-height: 1000px 
}

的HTML

<html> 
<head> 
    <title>Yorkshire Sport 4 All</title> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link href="css/style.css" rel="stylesheet" type="text/css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <!--[if IE 7]> 
     <link href="css/ie7.css" rel="stylesheet" type="text/css"> 
    <![endif]--> 
</head> 
<body> 
    <div id="background"> 
     <div id="page"> 
      <div id="header"> 
       <img style="padding-top:15px" src="images/logo2.jpg" alt="Logo 2"> 
       <ul class="navigation"> 
        <li> 
         <a href="index.html" class="btn btn-info" role="button">Home</a> 
        </li> 
        <li> 
         <a href="contact.html" class="btn btn-info" role="button">About Us</a> 
        </li> 
       </ul> 
      </div> 
      <!-- start of body--> 
      <div id="body"> 
       <div class="panel panel-default"> 
        <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
        <!-- Indicators --> 
        <ol class="carousel-indicators"> 
         <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
         <li data-target="#myCarousel" data-slide-to="1"></li> 
         <li data-target="#myCarousel" data-slide-to="2"></li> 
        </ol> 

        <!-- Wrapper for slides --> 
        <div class="carousel-inner" role="listbox"> 
         <div class="item active"> 
         <img src="images/sport1.jpg" alt="sport1"> 
         </div> 

         <div class="item"> 
         <img src="images/sport2.jpg" alt="sport2"> 
         </div> 

         <div class="item"> 
         <img src="images/sport3.jpg" alt="sport3"> 
         </div> 

        </div> 

        <!-- Left and right controls --> 
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
         <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
         <span class="sr-only">Previous</span> 
        </a> 
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
         <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
         <span class="sr-only">Next</span> 
        </a> 
        </div> 
       </div> 
      </div> 
      <!-- end of body--> 
      <!-- start of section--> 
      <div id="section"> 
       <div class="panel panel-default"> 
        <div class="footer"> 
         <div style="font-size:16px; color:black;" class="body"> 

          <p> 
           Here at Yorkshire Sport 4 All we provide fun and engaging sessions for children of all ages by Two Qualified P.E Teachers with a wealth of experience and an extensive knowledge 
           of primary and secondary P.E. curriculum<br /> 
           What we offer:<br /> 
          </p> 
          <ul> 
           <li>Elite Football Coaching In Schools<br /> 
            - An in depth knowledge of the game at all levels from semi professional to international <br /> 
            - Knowledge of the physiological characteristics of Elite football and how it can be implemented into coaching <br /> 
            - Planned coaching with a playing philosophy to suit your needs <br /> 
            - Position Specific coaching <br /> 
            - Performance Analysis <br /> 
            - Strength and conditioning <br /> 
            - Links with Professional and Semi Professional clubs in Lincolnshire and Yorkshire and Humber<br /></li> 
           <li>Term Time PPA cover in primary schools by qualifed teachers<br /></li> 
           <li>Wednesday Evening Football Club<br /></li> 
          </ul> 
         </div> 
        </div> 
       </div> 
      </div> 
      <!-- end of section--> 
      <div id="footer"> 
       <div> 
        <div class="header"> <a href="index.html"></a> 
        </div> 
        <div class="body"> 
         <ul class="navigation"> 
          <li> 
           <a href="index.html">Home</a> 
          </li> 
          <li> 
           <a href="contact.html">About Us</a> 
          </li> 
         </ul> 
        </div> 
       </div> 
       <div id="footnote"> &copy; Copyright &copy; 2017 Company name all rights reserved </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

來源

2017-06-15 Fomnus

[「background-size：cover」可能重複不包括手機屏幕]（https://stackoverflow.com/questions/13659204/background-size-cover-does-not-cover-mobile-screen） –

你能否提供你的HTML，所以我們可以看到問題是什麼？ – Axion

向問題 – Fomnus

您應該將您的背景設置應用於body元素，而不是其他任何東西。

body { 
    height: 100%; 
    overflow: auto; 
    background-color: #ffff34; 
}

所有其他背景設置是多餘的，如果你只使用背景顏色和沒有圖像。

來源

2017-06-15 17:27:21 Johannes

添加了html感謝！改變這個解決了我的問題 – Fomnus

請刪除這些利ness from css。它不需要彩色背景。

background-size:  cover;     
background-repeat: no-repeat; 
background-position: center center;

這些是當您在使用背景圖像所需。

來源

2017-06-15 17:19:59

網站背景顏色不填充屏幕移動

回答

相關問題