1

I was hoping to find some way of entering code in the footer tag (like in my example) to stick the footer at the bottom instead of just below the end of my content. Is there a way to do this without CSS? Sorry if my terminology is off, I just started learning html a few days ago.

<!doctype html>
<html>
    <head><title> Sample Website </title></head>
<body>I want the footer at the bottom of the page</body>

  <footer height="0">This is a footer test for a short page</footer>

</html>
Williz
  • 15
  • 5
  • 1
    Why not use css? Is there a specific reason? – kevinSpaceyIsKeyserSöze Nov 11 '21 at 18:55
  • 2
    That's the point of CSS. It's akin to wanting your house to be blue without using paint. – Phix Nov 11 '21 at 18:56
  • 1
    ^^ To that point OR wanting your carpet stuck to the floor without using staples .. – Zak Nov 11 '21 at 18:57
  • I'm ok with using CSS if that's the only way to do it. I was just curious if there's an html code for it. I don't want to feel overwhelmed in learning more than html at the moment. – Williz Nov 11 '21 at 18:59
  • 1
    You *must* learn more than just HTML as HTML is just markup language that does nothing on it's own (similar to XML) – Justinas Nov 11 '21 at 19:00
  • 1
    Does this answer your question? [How to make a sticky footer using CSS?](https://stackoverflow.com/questions/29069498/how-to-make-a-sticky-footer-using-css) – Justinas Nov 11 '21 at 19:00
  • It's pretty simple. `
    This is a footer test for a short page
    `     – Zak Nov 11 '21 at 19:01
  • That's fair but no there isn't a way. – kevinSpaceyIsKeyserSöze Nov 11 '21 at 19:01
  • 2
    I don't believe there is a way to do it with HTML alone, short of glomming in a bunch of empty lines, which would be specific to only one screen size. There is probably a way to do it with JavaScript that would be bad. The proper way to do it would be with CSS. BUT-- you could just not have it stuck to the bottom of the page for now while you're still learning just HTML. Also, a sticky footer is a problem that is somewhat notoriously more difficult than it looks-- so I would suggest if you're just learning leave that particular task for a later time. – Alexander Nied Nov 11 '21 at 19:01
  • Thank you @Zak that worked. Thanks everyone for the input, I wasn't aware how necessary CSS is. – Williz Nov 11 '21 at 19:07
  • 3
    When learning HTML, the very first thing you need to understand is the *purpose* of HTML, which is **describing the semantic structure of your document**. It is in no way part of HTML's job to influence *how* things are displayed - that is the sole responsibility of CSS. – connexo Nov 11 '21 at 19:12

2 Answers2

-1

You can do this with VERY minimal CSS..

footer {
  height: 100px;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
}
<footer>
  This is a footer test for a short page
</footer>

OR you can use inline CSS:

<footer style="height: 100px; width: 100%; position: fixed; bottom:0; left:0;">This is a footer test for a short page</footer>
Alexander Nied
  • 12,804
  • 4
  • 25
  • 45
Zak
  • 6,976
  • 2
  • 26
  • 48
  • It's not as easy as this. – connexo Nov 12 '21 at 09:07
  • The positions you are using are applied relative to the `body` element, which, if not covering the whole screen, will make the footer sit somewhere right in the middle of the screen. So while your CSS shows part of what is needed, it doesn't address or even mention this basic issue. – connexo Nov 13 '21 at 11:06
  • I'm just using the Notepad program and saving as an html file. The inline CSS code worked. Thanks – Williz Nov 20 '21 at 20:40
-2

I'm wondering if this could be as simple as adding the following code to the bottom of your HTML document.

<footer>
  <p>Williz</p>
</footer>

This w3schools page provides some more context if you are interested. Overall, I agree 100% with Zak's comments and suggestions.

Sam Rothstein
  • 614
  • 5
  • 9
  • 1
    No, it's not as simple. The `footer` element doesn't mean anything in terms of positioning. It's used for semantic reasons. – disinfor Nov 11 '21 at 19:05