Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
New theme (problem)
#1
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>
Reply
#2
(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.
Reply
#3
thanks for respond. mb someone else will answer?
Reply
#4
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>
Reply
#5
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.
Reply




Users browsing this thread: 1 Guest(s)