我的网站上有5页。 “诗歌”和“关于我们”页面在移动设备上运行良好，但在手机上观看时，“索引”，“音乐”和“照片”页面都在页脚下面有这个奇怪的空间。我将发布css，以及有问题的3个页面。每页的头部都被切掉以节省空间。
它们可能很长但我完全迷失了导致这个问题的原因，特别是因为它们都共享相同的css类。所有5页以一个空的“spacer”div结尾，以便将页脚从我的内容中推出，并且它在所有5页上具有相同的类。
Edge，Chrome和Firefox等桌面浏览器上的一切都很好看。我也检查了不同尺寸的屏幕。
.header, .navBar, .pageTitle {
margin: 0px;
padding: 0px;
}
body {
margin:0px;
padding:0px;
}
font-size: 20px;
background-color: #006464;
}
html, body, #container {
min-height: 100vh;
}
footer {
background-color: #bfd8d8;
position:absolute;
bottom:0px;
width:100%;
font-size: 15px;
border: 1px solid black;
}
nav, h1, h2 {
font-family: arial, sans-serif;
}
nav a:hover {
background-color: #006400;
}
nav a {
color: white;
text-decoration: none;
}
h2 {
text-align: center;
background-color: white;
}
#container {
width: 1000px;
margin: auto;
position: relative;
}
.centerContent {
text-align: center;
}
#signUp {
color: white;
font-size: 20px;
font-family: arial;
}
#welcomeFont {
color: white;
font-size: 25px;
font-family: arial;
}
.currentNav {
background-color: #006400;
}
.emailStyle {
font-weight: bolder;
}
.footerSpacer {
height:50px;
}
.header {
color: white;
background-color: #006400;
padding: 20px;
}
.headerAnchor {
text-decoration: none;
color: white;
}
.navBar {
background-color: #228B22;
padding: 10px;
}
.pageTitle {
padding-bottom: 0px;
box-shadow: 0px 8px 25px 0px;
background-color: #bfd8d8;
}
.poetryAuthor {
color: white;
font-size: 15px;
font-family: arial;
font-style: italic;
}
.poetryCaptions {
margin-top: 50px;
color: white;
font-size: 25px;
font-family: georgia, serif;
}
.resizeAbout{
max-height: 50%;
max-width: 50%;
margin-top: 50px;
margin-bottom: 50px;
}
.resizeHome{
max-height: 50%;
max-width: 50%;
margin-top: 50px;
}
.resizePhotos{
max-height: 50%;
max-width: 50%;
}
.table {
background: #006464;
border: 1px solid black;
border-spacing: 10px;
}
.tableData {
font-size: 19px;
background: #bfd8d8;
border: 1px solid black;
padding: 8px;
}<body>
<div id="container">
<header>
<h1 class="header"><a class="headerAnchor" href="index.html">TheSingularEffect.Com</a></h1>
</header>
<nav class="navBar">
<a class="currentNav" href="index.html">Home</a>
<a href="music.html">Music</a>
<a href="photos.html">Photos</a>
<a href="poetry.html">Poetry</a>
<a href="about.html">About</a>
</nav>
<h2 class="pageTitle">
Get the Full Effect!
</h2>
<div class="centerContent">
<a href="image/homepage.jpg" target="blank"><img class="resizeHome" src="image/homepage.jpg" alt="Image of Daniel Adams"></a>
<h3 id="welcomeFont">
Welcome to the home of The Singular Effect!
</h3> <br>
<form>
<span id="signUp">Sign up for our newsletter!</span> <br>
<input type="text" name="emailaddress" value="Email Address">
<input type="submit" value="submit">
</form>
</div>
<div class="footerSpacer">
</div>
<footer>
© 2016, Chris Hughes - SNHU. Contact me at <span class="emailStyle">christopher.hughes1@snhu.edu</span>
</footer>
</div>
</body>
MUSIC:
<body>
<div id="container">
<header>
<h1 class="header"><a class="headerAnchor" href="index.html">TheSingularEffect.Com</a></h1>
</header>
<nav class="navBar">
<a href="index.html">Home</a>
<a class="currentNav" href="music.html">Music</a>
<a href="photos.html">Photos</a>
<a href="poetry.html">Poetry</a>
<a href="about.html">About</a>
</nav>
<h2 class="pageTitle">
Music
</h2>
<div class="centerContent">
<p class="poetryCaptions">The Day I Became Wind - Audio <br>
<span class="poetryAuthor">by Daniel Adams</span></p>
<audio controls="">
<source src="audio/wind.mp3" type="audio/mp3">
This audio type isn't supported by your browser.
</audio>
<br>
<p class="poetryCaptions">The Day I Became Wind - Video <br>
<span class="poetryAuthor">by Daniel Adams</span></p>
<iframe src="https://www.youtube.com/embed/6k32rSvoh0s"></iframe>
<br>
<p class="poetryCaptions">Elven Mystics - Audio <br>
<span class="poetryAuthor">by Daniel Adams</span></p>
<audio controls="">
<source src="audio/elvenmystics.mp3" type="audio/mp3">
This audio type isn't supported by your browser.
</audio>
<br>
<p class="poetryCaptions">Elvin Mystics - Video <br>
<span class="poetryAuthor">by Daniel Adams</span></p>
<iframe src="https://www.youtube.com/embed/3n_JdFXLamA"></iframe>
<br>
</div>
<div class="footerSpacer">
</div>
<footer>
© 2016, Chris Hughes - SNHU. Contact me at <span class="emailStyle">christopher.hughes1@snhu.edu</span>
</footer>
</div>
</body>
PHOTOS:
<body>
<div id="container">
<header>
<h1 class="header"><a class="headerAnchor" href="index.html">TheSingularEffect.Com</a></h1>
</header>
<nav class="navBar">
<a href="index.html">Home</a>
<a href="music.html">Music</a>
<a class="currentNav" href="photos.html">Photos</a>
<a href="poetry.html">Poetry</a>
<a href="about.html">About</a>
</nav>
<div class="centerContent">
<h2 class="pageTitle">
Photos
</h2>
<p class="poetryCaptions">Susquehanna River <br>
<span class="poetryAuthor">by Daniel Adams</span></p>
<a href="image/river.jpg" target="blank"><img class="resizePhotos" src="image/river.jpg" alt="Image of river"></a>
<br>
<p class="poetryCaptions">Grassy Plains - Island on the Susquehanna River <br> <span class="poetryAuthor">by Daniel Adams</span> </p>
<a href="image/grass.jpg" target="blank"><img class="resizePhotos" src="image/grass.jpg" alt="Image of grassy plains"></a>
<br>
<p>
</p>
</div>
<div class="footerSpacer">
</div>
<footer>
© 2016, Chris Hughes - SNHU. Contact me at <span class="emailStyle">christopher.hughes1@snhu.edu</span>
</footer>
</div>
</body>
CSS: