在制作我的网站时，我注意到它在笔记本电脑/台式机上很好但是当我在手机上看它时，它会在底部留下一个大的白色间隙，因为背景颜色不够伸展，在纵向模式下使用它在我的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"> © Copyright © 2017 Company name all rights reserved </div>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：1)
您应该将背景设置应用于body元素，而不是其他任何内容。
body {
height: 100%;
overflow: auto;
background-color: #ffff34;
}
如果您只使用背景颜色而没有图像，则所有其他背景设置都是多余的。
答案 1 :(得分：0)
请从css中删除这些行。彩色背景不需要它。
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
在后台使用图像时需要这些。