GetSimple Support Forum
New theme (problem) - Printable Version

+- GetSimple Support Forum (http://get-simple.info/forums)
+-- Forum: GetSimple (http://get-simple.info/forums/forumdisplay.php?fid=3)
+--- Forum: General Questions and Problems (http://get-simple.info/forums/forumdisplay.php?fid=16)
+--- Thread: New theme (problem) (/showthread.php?tid=7655)

New theme (problem) - Balistx - 2015-10-21

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>


RE: New theme (problem) - Timbow - 2015-10-21

(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.

RE: New theme (problem) - Balistx - 2015-10-21

thanks for respond. mb someone else will answer?

RE: New theme (problem) - Frens - 2015-10-22

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 &nbsp;<span>October 1st, 2015</span></p>
      </div>
    </div>
  </div>
  <div id="footer"> Footer</div>
</div>
</body>
</html>


RE: New theme (problem) - Tyblitz - 2015-10-26

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.