Задать вопрос
@antowa_plawkevich
Junior Front-end developer

Не могу прижать футер к низу страницы?

Здравствуйте, я начинающий верстальщик не судите строго , проблема в том что не могу прижать футер к низу страницы, он налазит на текст, перерыл весь гугл, не один способ не помогает, буду очень рад помощи и указать мою ошибку что я не правильно сделал, буду очень благодарен.
371be40f40c5455fbacb32c24206b22c.PNG
https://jsfiddle.net/6no51wek/ ( вот код, не знал куда выложить , если как-то не правильно то подскажите)

Буду благодарен за помощь
скину ещё сюда код
HTML
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div id="wrapper">	
		<header>
			<div class="header">
				<div class="input">
					<form action="" method="">
						<input id="login" type="text" name="login" placeholder="Логин">
						<input id="pw" type="password" name="password" placeholder="Пароль">
						<input id="ent" type="submit" name="submit" value="Вход">
					</form>
				</div>
				<div class="name_clan">
					<h1>Rivendell</h1>
				</div>
				<div class="header_bot">
					<div class="buttom_apeha img_back">
						<div class="te1">
							<a href="#">Новости
							</div>
							<div class="te2">
								АРЕНЫ</a>
							</div>	
						</div>
						<div class="buttom_clan img_back">
							<div class="te1">
								<a href="#">Новости
								</div>
								<div class="te2">
									КЛАНА</a>
								</div>
							</div>
						</div>
					</div>
				</header>
				<div class="content">
					<nav>
						<ul class="nav_menu">
							<li class="join"><a href="#">Вступление</a></li>
							<li><a href="#">Главная</a></li>
							<li><a href="#">Состав</a></li>
							<li><a href="#">Устав</a></li>
							<li><a href="#">Форум</a></li>
							<li><a href="#">Дипломатия</a></li>
							<li><a href="#">Галерея</a></li>
							<li><a href="#">Легенда</a></li>
						</ul>
					</nav>
					<aside>
						<div class="menu">
							<div class="useful_links">
								<p><h1 class="ss">Полезные ссылки</h1></p>
								<ul>
									<li><a href="#">на арену</a></li>
									<li><a href="#">законы арены</a></li>
									<li><a href="#">библиотека</a></li>
									<li><a href="#">форум драконов</a></li>
									<li><a href="#">смайлы</a></li>
									<li><a href="#">образы</a></li>
								</ul>
							</div>
							<div class="online_plr">
								<ul>
									<h1 class="ss">Кто онлайн</h1>
									<li>ГаладриЭль</li>
									<li>Галадри</li>
									<li>ГаладриЭльвав</li>
								</ul>
							</div>
							<div class="ally">
								<img src="desktop-assets/ally.png" alt="ally">
							</div>
							<div class="allyy">
								<ul>
									<li class="riv"><a href="#">RIVENDELL</a></li>
									<li class="valk"><a href="#">Валькирии</a></li>
								</ul>
							</div>
							<div class="gallery">
								<img src="desktop-assets/gall.png" alt="gall">
							</div>
							<div class="gallery1">
								nickname
							</div>
							<div class="gal_img">
								<img src="desktop-assets/shulila.png" alt="shilila.png">
							</div>
							<div class="diller">
								<img src="desktop-assets/diller.png" alt="dil">
								<div class="dil1">
									<img src="desktop-assets/lleka.png" alt="leka">
								</div>
								<div class="dil2">
									<img src="desktop-assets/shilulaa.png" alt="shilulla">
								</div>
							</div>
						</div>
					</aside>
				</div>
			</div>
			<section>
				<div class="blog1">
					
					<a href="#" class="tourm">
						<img src="desktop-assets/forest_map.png" alt="chemp">
						<div class="blognav chemp1">
							<h1>Карта Леса</h1>
						</div>	
						<a href="#" class="tourm">
							<img src="desktop-assets/chemp.png" alt="chemp">
							<div class="blognav chemp1">
								<h1>Чемпионат</h1>
							</div>	
						</a>

						<a href="#" class="tourm">
							<img src="desktop-assets/pereodev.png" alt="chemp">
							<div class="blognav chemp1">
								<h1>Переодевалка</h1>
							</div>	
						</a>

						<a href="#" class="tourm">
							<img src="desktop-assets/prim.png" alt="chemp">
							<div class="blognav chemp1">
								<h1>Примерочная образа</h1>
							</div>	
						</a>

						<a href="#" class="tourm">
							<img src="desktop-assets/help.png" alt="chemp">
							<div class="blognav chemp1">
								<h1>Помощь новичкам</h1>
							</div>	
						</a>

						<a href="#" class="tourm">
							<img src="desktop-assets/peredevalk.png" alt="chemp">
							<div class="blognav chemp1">
								<h1>Переодевалка</h1>
							</div>	
						</a>
					</div>
					<div class="news">
						<div class="news1">
							<img src="desktop-assets/hr.png" alt="hr">
							<span><div class="name1">
								<h1><a href="">Карта Нового леса и моря</h1> 
									<div class="name1 name1_2">
										<h2>Опубликовано чт, 01/12/2016 - 22:52 пользователем Axios</h2></a>
									</div>
								</div></span>

								<div class="text1">
									<img class="icon1" src="desktop-assets/forest_map.png" alt="forest">
									<div class="write1"><p>Локации не все! Будут добавляться по мере изготовления. Планируем за 2017 год  все локации включая море.</p>
										<p>Карта будет редактироваться и улучшаться по мере поступления Ваших идей и пожеланий! Все для вашего удобства! Оставляйте свои пожелания в коментариях если таковы имеються, давайте сделаем вместе хорошую карту леса.</p>

										<p>Максимально точная карта леса и моря. Точность 100%. На создания каждой отдельной локации карты ушло более 650 скринов 25х25. 
											Уникальная карта с отличным и оригинальным качеством прорисовки местности, тропинок, водоемов, зданий и оригинальных границ. Указаны все выходы и входы, тупики. Оцените высокое качество и удобство в пользовании.</p>

											<p>Планируем за 2017 год  все локации включая море.Карта будет редактироваться и улучшаться по мере поступления Ваших идей и пожеланий! Все для вашего  все локации включая удобства!</p></div>
										</div>
										<div class="comment1">
											<a href="#"><img src="desktop-assets/comment.png" alt="comment1">
												Коментариев
												<img src="desktop-assets/wiev.png" alt="wiev">
												162 просмотра</a>
											</div>
											
										</div>

										<div class="news2">
											<img src="desktop-assets/hr.png" alt="hr">
											<div class="name2">
												<a href="#">Карта Нового леса и моря 
													<div class="name2 name2_2">
														Опубликовано чт, 01/12/2016 - 22:52 пользователем Axios</a>
													</div>
												</div>
												<div class="text2">
													<img class="icon2" src="desktop-assets/forest_map.png" alt="forest">
													<div class="write2"><p>Локации не все! Будут добавляться по мере изготовления. Планируем за 2017 год  все локации включая море.</p>
														<p>Карта будет редактироваться и улучшаться по мере поступления Ваших идей и пожеланий! Все для вашего удобства! Оставляйте свои пожелания в коментариях если таковы имеються, давайте сделаем вместе хорошую карту леса.</p>

														<p>Максимально точная карта леса и моря. Точность 100%. На создания каждой отдельной локации карты ушло более 650 скринов 25х25. 
															Уникальная карта с отличным и оригинальным качеством прорисовки местности, тропинок, водоемов, зданий и оригинальных границ. Указаны все выходы и входы, тупики. Оцените высокое качество и удобство в пользовании.</p>

															<p>Планируем за 2017 год  все локации включая море.Карта будет редактироваться и улучшаться по мере поступления Ваших идей и пожеланий! Все для вашего  все локации включая удобства!</p></div>
														</div>
														<div class="comment2">
															<a href=""><img src="desktop-assets/comment.png" alt="comment1">
																Коментариев
																<img src="desktop-assets/wiev.png" alt="wiev">
																162 просмотра</a>
															</div>
															
														</div>
													</div>
												</section>
												<footer>
													<img src="desktop-assets/footer.png" alt="footer">
												</footer>	
											</body>
											</html>
  • Вопрос задан
  • 314 просмотров
Подписаться 2 Оценить 2 комментария
Пригласить эксперта
Ответы на вопрос 2
sfi0zy
@sfi0zy Куратор тега CSS
Creative frontend developer
Не могу прижать футер к низу страницы... перерыл весь гугл, не один способ не помогает...

...И в седьмой раз я приложу к ответу эту демку.
Ответ написан
@Rheinmetall
Могу сморозить глупость
Попробуй для начала поправить верстку, потому что там творится какая-то содомия, тэги у тебя открываются и закрываются в шахматном порядке, h1 вовсе не надо запихивать в p и пр. . Перейди по своей же ссылке на jsfiddle он же тебе подсвечивает красным весь этот бред и исправь верстку, а потом пробуй прибивать футер способами из гугла
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы