CODEWITHSUNDEEP
htmlcsssticky-footer
Miroslav
Miroslav

Reputation: 4695

CSS Layout with Footer and Middle Panel

I'm having a headache trying to build a simple CSS 3 layout...

Desired CSS layout

Here is what I have now - http://jsfiddle.net/e1c79ak5/

Here's HTML

<body>
    <div id="container">
        Some stuff<br />
        Some stuff<br />
        Some stuff<br />
    </div>
    <footer class="footer">
        Some text in footer
    </footer>
</body>

And CSS:

html {
  position: relative;
  min-height:100%;
}
body {
  background-color: #808080;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
  background-color: #f5f5f5;
  border:1px red solid;
}

#container 
{
  width: 500px;   
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  margin-top:0;
  background-color:#FFFFFF;
  border:1px red solid;
}

I don't know how to make the middle panel resize its height so it's always touching the footer below...also, when the browser is resized to a smaller viewport, the footer moves over the middle content :( I haven't yet found out how to fix that...

Is there a CSS solution to this?

Upvotes: 1

Views: 652

Answers (2)

dippas
dippas

Reputation: 60553

You can use Sticky Footer

Here is a snippet with your code:

html,body {
  height: 100%;
}
body {
  background-color: #808080;
}
footer {
  background-color: yellow;
  border: 1px green solid;
}
#container {
  background-color: #FFFFFF;
  border: 1px red solid;
  min-height: 100%;
  margin-bottom: -90px; /* equal to footer height */
}
#container:after {
  content: "";
  display: block;
}
footer,#container:after {
  height: 90px;
}
<body>
  <div id="container">
    Some stuff
    <br />Some stuff
    <br />Some stuff
    <br />
  </div>
  <footer class="footer">
    Some text in footer
  </footer>
</body>

Upvotes: 1

Danield
Danield

Reputation: 125443

The problem is that you have set position:absolute on your footer.

This of course won't work when there is lots of content - the footer will just scroll up with the content.

One easy way to get your sticky footer would be to set min-height: calc(100vh - 90px); on the container - which means:

'make the height of the container at least 100% of the height of the viewport minus the 90px footer height.'

FIDDLE

Upvotes: 1

Related Questions