Menu
the age-old problem. I need to position a <footer> Element at the bottom of the page. However i don't have a wrapper div.
I'm do have the following stucture…
<body>
<header>
<section id="content">
<footer>
</body>
Is there an easy way to push the footer to the bottom if the content is not high enough?
644
HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for building Web pages. HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices.
There are three types of CSS which are given below: Inline CSS. Internal or Embedded CSS. External CSS.
CSS stands for Cascading Style Sheets, and it's used to add style to a web page by dictating how a site is displayed on a browser. CSS is unique in that it doesn't create any new elements, like HTML or JavaScript. Instead, it's a language used to style HTML elements.
Came by this question, and thought I'd post what I've come across. Seems like the ideal way to me.
CSS:
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
HTML5:
<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<nav></nav>
<article>Lorem ipsum...</article>
<footer></footer>
</body>
</html>
All credit goes to http://mystrd.at/modern-clean-css-sticky-footer/
100
Make it position: fixed; bottom: 0, height: xxx? Of course, then it'd overlap any content should the page actually go past the bottom of the window. Perhaps some JS to detect "short" content and set css as appropriate.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
