Блог

Главная - Вопросы по программированию - Пытаетесь определить нежелательное пространство под моим нижним колонтитулом при просмотре на мобильном устройстве?

Пытаетесь определить нежелательное пространство под моим нижним колонтитулом при просмотре на мобильном устройстве?

#html #css #mobile #footer #spacing

#HTML #css #Мобильный #нижний колонтитул #интервал

Вопрос:

У меня на моем сайте 5 страниц. Страницы «поэзия» и «о нас» отлично работают на мобильных устройствах, но на страницах «индекс», «музыка» и «фотографии» под нижним колонтитулом есть странное пространство при просмотре на мобильных устройствах. Я опубликую css вместе с 3 страницами, на которых есть проблема. Раздел заголовка каждой страницы обрезан для экономии места.

Они могут быть длинными, но я совершенно не понимаю, что вызывает эту проблему, тем более, что все они используют одни и те же классы css. Все 5 страниц заканчиваются пустым разделителем 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>
			amp;copy; 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>
			amp;copy; 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>
			amp;copy; 2016, Chris Hughes - SNHU. Contact me at <span class="emailStyle">christopher.hughes1@snhu.edu</span>
		</footer>
	</div>
</body>

CSS:

Комментарии:

1. Пожалуйста, отредактируйте его, чтобы он был как можно короче. Удалите бит, протестируйте, повторите.

2. Кроме того, я не вижу CSS..

3. css находится в нижней части фрагмента. У меня была эта проблема раньше, когда я публиковал отдельные фрагменты, и несколько человек сказали мне, что я не должен публиковать их отдельно, а как один фрагмент. Так что я действительно не знаю, как угодить всем здесь. Но оно там есть. Я постараюсь обрезать верхнюю часть HTML-страниц, потому что все они одинаковы.

4. Просто исправьте, где написано «CSS» и «HTML», например, «CSS» написано внизу

5. Я буду, однако я изначально разместил его с помощью CSS в нижней части HTML, а кто-то отредактировал его наоборот.