CODEWITHSUNDEEP
htmlcss
Jeanluca Scaljeri
Jeanluca Scaljeri

Reputation: 29129

min-height not working on the body

I'm having some issues with min-height: 100%

I want the footer always below my content. Meaning, if the content is longer than the screen height, you don't see the footer, until you've scrolled all the way to the bottom

Also, when the content is shorter than the screen height, the footer needs to be at the bottom of the screen. Well, I thought I solved this just by adding min-height: 100%

<html>
    <head>
        <style>
            html, body, main { min-height: 100% }
        </style>
    </head>
    <body>
        <main>
            <article> .... </article>
            <footer> ... </footer>
        </main>
    </body>
</htm>

DEMO

Now, for some reason the body tag seems to ignore this setting and its height simply fits the content.

Unfortunately, you can't just set the body to 100% ( DEMO )

Any suggestions how to fix this ?

Upvotes: 0

Views: 2268

Answers (6)

Pete
Pete

Reputation: 58432

You can use display:flex for this:

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

main {
  min-height:100%;
  display: flex;
  flex-direction: column;
  background:blue;
}

article {
  flex-grow: 1;
  background:green;
}

footer {
  background:orange;
}
<main>
  <article>... </article>
  <footer> ... </footer>
</main>

Upvotes: 2

Deepak Yadav
Deepak Yadav

Reputation: 7079

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* browser reset */

html {
  height: 100%;
  position: relative;
  min-height: 100%: padding-bottom: 50px;
  /* equal to footer height */
}
body {
  height: 100%;
  color: #fff;
}
footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  background: #ccc;
}
header {
  background: #333;
}
main {
  background: tomato;
}
<html>

<body>
  <header>Menu</header>
  <main>content of unknown height!!</main>
  <footer>footer always stays at bottom</footer>

</body>

</html>

This is just what you need to do.

Upvotes: 1

Slavenko Miljic
Slavenko Miljic

Reputation: 3856

Sticky footer 'hack' is usually done with the min-height and negative margin-bottom on the footer parent element. All parent elements up until root html, need to have height:100%;

article{
  //height: calc(100% - 50px);
  min-height: 100%;
  background: yellow;
  padding-bottom: 50px;
  margin-bottom:-50px;
}

JSFIDDLE LONG CONTENT

JSFIDDLE SHORT CONTENT

Upvotes: 4

Legionar
Legionar

Reputation: 7597

The fantastic CSS Tricks website has, in their Snippets area a snippet for a Sticky Footer:

http://css-tricks.com/snippets/css/sticky-footer/

Or using jQuery:

http://css-tricks.com/snippets/jquery/jquery-sticky-footer/

latest link with demo

Or you can simply use Modern Clean CSS “Sticky Footer” from James Dean

So just change your HTML and CSS to this:

HTML

<!DOCTYPE html>
<head>
    <title></title>
</head>
<body>
    <main>
        <article> .... </article>
    </main>
    <footer> ... </footer>
</body>
</html>

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%;
}

Demo here

Upvotes: 3

Gerrit Bertier
Gerrit Bertier

Reputation: 4221

If you don't want to mess with positioning, you can use vh units. 1vh equals 1% of the viewport's height.

(For reference, this is a good read: https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/)

Fiddle: http://jsfiddle.net/np9n4ckb/6/

CSS

* {
  margin: 0;
  box-sizing: border-box;
  padding: 0;
}

html, body {
  min-height: 100vh; /* Minimum height is the full viewport */
}

article {
  min-height: calc(100vh - 50px); /* Minimum height is the viewport height minus the footer */
}

main {
  background-color:lightgray;
}

footer {
  background-color: green;
  height: 50px;
}

Upvotes: 1

sailens
sailens

Reputation: 1614

I modified your css to put the footer and the article in a relative position:

* {
  margin: 0;
  box-sizing: border-box;
  padding: 0;
}

article {
  height: calc(100% - 50px);
  position: relative;
}

main {
  background-color:lightgray;
}
footer {
  background-color: green;
  height: 50px;
  position: relative;
  bottom: 0;
  width: 100%;
}

the fiddle: http://jsfiddle.net/np9n4ckb/5/

Upvotes: 1

Related Questions