footer on very bottom of page HTML

Question

I know a lot of people asked that already but nothing seems to work. I want my footer to be on the bottom of the page. So far it is on the bottom of the screen, but if the page is bigger and you need to scroll, it just sticks there and stays in the middle. If I put position: fixed the footer scrolls with you. I want it to be at the VERY BOTTOM of the page, though, so you have to scroll down to see it in the first place, if the page is too big.

I tried several different wrappers and pushers but nothing seems to work.

@connexo on what? my footer is already on position: absolute; — alex, Mar 20 '18 at 07:24
Possible duplicate of [How do you get the footer to stay at the bottom of a Web page?](https://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) — aMJay, Mar 20 '18 at 07:27
@MateuszJuruś tried as described in there, same issue still — alex, Mar 20 '18 at 07:31
You have `html {height:100%}` which is 100% of the window, and the footer is positioned at its bottom. The rest is what overflows out of the html. — Mr Lister, Mar 20 '18 at 07:33
@Bhuwan if I do `position: fixed` the footer scrolls with the page. I want it to be at the bottom of the whole page so you don't see it until you scroll to it — alex, Mar 20 '18 at 07:36
@alex then you dont need to use any position values to footer...its a `float` issue...you are using `float` in a wrong way.. — Bhuwan, Mar 20 '18 at 07:42

score 0 · Answer 1 · edited Mar 20 '18 at 08:41

You can try this, hope this will help you

Remove min-height for pageimg class and content class then you will get your output.

.pagelist {
  background-color: deeppink;
  position: relative;
  float: right;
  width: 20%;
  height: 70%;
  overflow-y: scroll;
  margin-right: 10px;
}

.pageimg {
  position: relative;
  float: left;
  width: 100%;
  /* min-height: 500px; */
  text-align: center;
  display: flex;
  align-items: center;
}

.pageimg img {
  margin: 0 auto;
}

.pagetext {
  position: relative;
  float: left;
  margin-top: 1%;
  width: 100%;
  text-align: center;
  padding-bottom: 10px;
}

.pageframe {
  position: absolute;
  width: 75%;
  margin-left: 10px;
  text-align: center;
}

.comiclist {
  background-color: lightgrey;
  padding-left: 5px;
  width: 90%;
}

.floatbutt-right {
  float: right;
}

.floatbutt-left {
  float: left
}

.footer {
  position: absolute;
  width: 100%;
  bottom: 0;
  height: 30px;
  background-color: lightgrey;
  font-size: 12px;
  color: grey;
}

.footer span {
  float: right;
  margin-top: 5px;
  margin-right: 10px;
}

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
}

.spacer {
  width: 100%;
  height: 95px;
}

.content {
  width: 100%;
  margin-bottom: -30px;
  /* Footer */
}

<div id="navbar">
<img class="logo" src="inc/logo.png" />
komix.lit
<button id="home" class="navbutt" onClick="location.href='home.php'">Home</button>
<button id="comics" class="navbutt" onClick="location.href='komix.php'">Komix</button>
<button id="login" class="navbutt" onClick="location.href='login.php'">Einloggen</button></div>
<div class="content">
<div class="spacer"></div><div class="pagelist"><ul style="list-style-type: none;"><li><a style='text-decoration: none; color: black;' href='pages.php?id=84'>Seite 1</a></li><li><a style='text-decoration: none; color: black;' href='pages.php?id=86'>Seite 2</a></li><li><a style='text-decoration: none; color: black;' href='pages.php?id=85'>Seite 3</a></li></ul></div><div class='pageframe'><div class='pageimg' style='height: 1024;'>
                        <img src='komix\19_03_18_10_21_31-12.jpg'
                        alt='seite 1' style='max-width:100%'/> </div><div class='pagetext'>seite 1</div><button class='floatbutt-right' onClick="location.href='pages.php?id=86'">nächste Seite</button></div></div>
<div class="footer">
        <span>text</span>
</div>

i tried to apply your changes, but the issue remains the same — alex, Mar 20 '18 at 07:40
but i implemented this code, its working on my end. Did you use the same code? — preetpal, Mar 20 '18 at 07:41
i didnt edit my code since i posted it here and commented out the parts you told me to... weird — alex, Mar 20 '18 at 07:47

score 0 · Answer 2 · answered Mar 20 '18 at 08:01

You should overthink your layout and read about the HTML box model.

I put all your elements in a wrapper which is position: relative, so the footer with position: absolute can align properly. Also I had to remove position: absolute of .pageframe:

.pagelist {
  background-color: deeppink;
  position: relative;
  float: right;
  width: 20%;
  height: 70%;
  overflow-y: scroll;
  margin-right: 10px;
}

.pageimg {
  position: relative;
  float: left;
  width: 100%;
  min-height: 500px;
  text-align: center;
  display: flex;
  align-items: center;
}

.pageimg img {
  margin: 0 auto;
}

.pagetext {
  position: relative;
  float: left;
  margin-top: 1%;
  width: 100%;
  text-align: center;
  padding-bottom: 10px;
}

.pageframe {
  /* position: absolute; */ 
  width: 75%;
  margin-left: 10px;
  text-align: center;
}

.comiclist {
  background-color: lightgrey;
  padding-left: 5px;
  width: 90%;
}

.floatbutt-right {
  float: right;
}

.floatbutt-left {
  float: left
}

.footer {
  position: absolute;
  width: 100%;
  bottom: 0;
  height: 30px;
  background-color: lightgrey;
  font-size: 12px;
  color: grey;
}

.footer span {
  float: right;
  margin-top: 5px;
  margin-right: 10px;
}

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
}

.spacer {
  width: 100%;
  height: 95px;
}

.content {
  height: 100%;
  width: 100%;
  margin-bottom: -30px;
  /* Footer */
}

#wrapper {
  min-width: 100%;
  min-height: 100%;
  display:inline-block;
  position:relative;
}

<head lang="de">
  <link rel="stylesheet" href="inc/layout.css">
  <script src="inc/javascript.js"></script>
  <meta charset="UTF-8" />
  <title>komix.lit</title>
</head>

<body>
<div id="wrapper">
  <div id="navbar">
    <img class="logo" src="inc/logo.png" /> komix.lit
    <button id="home" class="navbutt" onClick="location.href='home.php'">Home</button>
    <button id="comics" class="navbutt" onClick="location.href='komix.php'">Komix</button>
    <button id="login" class="navbutt" onClick="location.href='login.php'">Einloggen</button></div>
  <div class="content">
    <div class="spacer"></div>
    <div class="pagelist">
      <ul style="list-style-type: none;">
        <li><a style='text-decoration: none; color: black;' href='pages.php?id=84'>Seite 1</a></li>
        <li><a style='text-decoration: none; color: black;' href='pages.php?id=86'>Seite 2</a></li>
        <li><a style='text-decoration: none; color: black;' href='pages.php?id=85'>Seite 3</a></li>
      </ul>
    </div>
    <div class='pageframe'>
      <div class='pageimg' style='height: 1024;'>
        <img src='komix\19_03_18_10_21_31-12.jpg' alt='seite 1' style='max-width:100%' /> </div>
      <div class='pagetext'>seite 1</div><button class='floatbutt-right' onClick="location.href='pages.php?id=86'">nächste Seite</button></div>
  </div>
  <div class="footer">
    <span>text</span>
  </div>
</div>
</body>

</html>

footer on very bottom of page HTML

2 Answers2