Posts: 2
Threads: 1
Joined: Oct 2015
2015-10-21, 02:57:24
(This post was last modified: 2015-10-22, 00:59:36 by Balistx.)
Hello!
I'm developing a new theme, everything seems ok, but I have a problem. I can't set footer to bottom of the page.
I know that many people don't like to read foreign code, but I ask you to help me please.
Footer moves up and appears at the level of content.
Code:
<div id="header">Header image</div>
Posts: 1,127
Threads: 136
Joined: Feb 2012
(2015-10-21, 02:57:24)Balistx Wrote: Hello!
I'm developing a new theme, everything seems ok, but I have a problem. I can't set footer to bottom of the page.
I know that many people don't like to read foreign code, but I ask you to help me please.
Footer moves up and appears at the level of content.
......
If you type "make footer" into google then auto-complete gives you the top option "...stick to bottom", it is a very common problem. iirc youmake a container and give it height 100% then absolute position the footer div at the bottom,but I may have that wrong, we don't really teach css round here.
Posts: 2
Threads: 1
Joined: Oct 2015
thanks for respond. mb someone else will answer?
Posts: 57
Threads: 4
Joined: Sep 2015
2015-10-22, 01:16:49
(This post was last modified: 2015-10-22, 01:24:42 by Frens.)
Hi,
Something like the sample below , or you mean a Sticky Footer?
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test 1</title>
<style type="text/css">
<!--
#wrapper {
width: 90%;
margin: 0 auto;
border: 1px solid #00C
}
#header {
background: #333;
height: 200px;
background: #FF3
}
#header image {
}
#content #page-content {
height: 400px;
}
#footer {
height: 100px;
background: #FF3
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header">Header image</div>
<div id="content">
<h1>Titel</h1>
<div id="page-content">
<div class="page-text"> text text text page text
<p class="page-meta">Published on <span>October 1st, 2015</span></p>
</div>
</div>
</div>
<div id="footer"> Footer</div>
</div>
</body>
</html>
Posts: 305
Threads: 15
Joined: Mar 2014
CSS tricks provided a nice example of creating a
sticky footer a while ago: it sticks to the bottom when the content is less than the window's height, and gets pushed down when it is more.
