Я учусь веб-разработке, и я просто не могу понять, что я делаю неправильно в этом. Я хочу, чтобы нижний колонтитул этой страницы оставался внизу, под всем содержимым, но не фиксировался на экране. Проблема в том, что когда тело имеет высоту более 100%, нижний колонтитул остается в середине экрана, а не внизу.
Я видел много учебных пособий о том, как этого добиться, используя "position: absolute" + "bottom: 0" и прочее, но все провалилось.
Проверьте это:
<html>
<head>
<meta charset="iso-8859-1" />
<link rel="stylesheet" type="text/css" href="index.css" />
<link href='https://fonts.googleapis.com/css?family=Arvo|Open+Sans|Ubuntu+Roboto' rel='stylesheet' type='text/css'>
<title>Matheus Page</title>
</head>
<body>
<div id="wrapper">
<header>
<div class="title-div">
<h1>Title</h1>
</div>
<nav>
<ul>
<li><h3>Home</h3></li>
<li><h3>Articles</h3></li>
<li><h3>Perfil</h3></li>
<li><h3>Settings</h3></li>
</ul>
</nav>
</header>
<div id="body">
<p>Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste </p>
</div>
<footer>
<p>Footer</p>
</footer>
<div>
</body>
CSS:
body {
font-family: 'Arvo', serif;
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
min-height:100%;
}
header {
position: absolute;
float: top;
width: 100%;
height: 8%;
background-color: #424242;
color: #FFD740;
}
.title-div {
position: absolute;
height: 100%;
margin: auto 5%;
padding-right: 3%;
border-right: solid 2px #FFD740;
}
header nav {
position: absolute;
width: 75%;
left: 15%;
}
header ul {
list-style: none outside none;
}
header ul li{
display: inline-block;
margin: auto 2% auto 0;
}
#body {
padding:10px;
padding-top:8%;
padding-bottom:15%; /* Height of the footer */
}
footer {
position: absolute;
width: 100%;
height: 15%;
right: 0;
bottom: 0;
left: 0;
color: #FFD740;
background-color: #424242;
clear: both;
}
ссылка на экран печати результата
Это моя первая веб-страница, и опять же, я искал в Интернете и нашел много решений, но не смог заставить работать. Кроме того, извините за мой английский, это не мой родной язык.