Make container full-height?

Hello. Below is a mockup web page.

How can I make it so the footer is always at the bottom of the screen regardless of how much content in in my middle flexbox?

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

	<title>sp_full-height_w_footer.php</title>

  <style>
    *{
      margin: 0;
      padding: 0;
    }

    body{
      font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
      font-weight: normal;
      font-size: 1em;
      line-height: 1.4em;
      color: #000;
    }

    h1, h2, h3, h4{
      padding: 0.5em 0 0.5em 0;
      font-weight: bold;
      text-align: left;
    }

    h1{
      border-bottom: solid 2px #000;
    }

    p{
      padding: 0 0 1em 0;
    }

    #containerMast_fixed{
      position: fixed;
      top: 0;
      width: 100%;
      box-sizing: border-box;
      padding: 0 2rem 1rem 2rem;
      background-color: #FFF;
    }

    #containerBody{
      width: 100%;
      box-sizing: border-box;
      padding: 5.5rem 2rem 2rem 2rem;
    }

    .flexBox{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      margin: 0 auto;
    }

    #footer{
      padding: 1rem 2rem;
      text-align: right;
      background-color: #AAA;
    }
  </style>
</head>

<body>
  <!-- Mast -->
  <div id="containerMast_fixed">
    <h1>MySite</h1>
  </div>
  
  <!-- Body -->
  <div id="containerBody">    
    
    <!-- Flex Container -->
    <div class="flexBox">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id justo rhoncus, finibus nisl sit amet, pretium nibh. Aliquam nec turpis auctor justo fringilla aliquet et vitae magna. Vestibulum est mauris, condimentum id pulvinar sed, volutpat eu massa. Morbi cursus lacus in lectus venenatis gravida. Ut facilisis mollis hendrerit. Maecenas a nunc erat. Quisque erat arcu, facilisis sed consectetur vel, efficitur at quam. Pellentesque semper est nec arcu imperdiet, id facilisis neque luctus. Cras in rutrum ante, nec fringilla tortor. Pellentesque ac nibh volutpat, bibendum mi non, ultricies nisl. Sed malesuada condimentum nunc ut imperdiet. Pellentesque faucibus eu lorem aliquam volutpat. Duis gravida aliquet ultricies. Nam eu tempus lectus.</p>

      <p>Duis semper commodo gravida. Aenean dolor mauris, laoreet nec tempus id, congue vitae enim. Morbi at ultrices nisl. Maecenas quis lorem sollicitudin, fringilla elit eget, mollis velit. Morbi gravida consequat nisl, eget accumsan velit. Ut feugiat quis diam ac aliquam. Aenean ornare placerat hendrerit. Donec vel nulla quis sapien laoreet dictum et id nulla.</p>

      <p>Donec eleifend porta ullamcorper. Sed diam tortor, ornare vel gravida non, tristique in sem. Sed vel condimentum odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis eros libero, gravida at egestas ac, ultricies in erat. Vestibulum condimentum lorem in erat mollis, in fermentum orci consectetur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum venenatis pulvinar ullamcorper. Etiam sollicitudin vitae metus vel posuere. Quisque viverra, libero id egestas consequat, ipsum lorem varius arcu, semper condimentum ex eros id ex. Curabitur tincidunt felis ultrices, blandit ipsum in, vestibulum mauris.</p>
    </div><!-- End of .flexBox -->
    
  </div><!-- End of #containerBody -->

  <!-- Footer -->
  <div id="footer">
    <a href="">Contact us</a>
  </div>  

</body>

</html>

Oh, and I want a solution that works for mobile too.

I played around with trying to make a footer do this in the past with no luck and gave up. You would think this is easier to do than it is?!

https://www.sitepoint.com/community/t/fix-on-the-bottom-of-the-browser/344993/7

@John_Betong,

I tried the code in that link but it doesn’t seem to work…

For my current issue, I have a home page with just a mast and a log in screen that do not fill the entire screen, so my footer is like 3/4 the way down the screen and it looks odd. I want a way to scoot the footer down to the bottom of the screen and have it behave that way regardless of the screen type (i.e. responsive).

If I happened to have more than one screen of content, then I am thinking the code in the link you posted might work, although that wasn’t my goal here.

It would help if you supplied the full script that does not work.

Meanwhile a guess and a KLUDGE to be added to the footer class which was not recommended by Paul.

#footrr {
  position: fixed;
  left : 0; bottom : 0;
  width : auto; /* 100% */
  background-color : RED;
}

@John_Betong,

Here is my latest code…

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

	<title>sp_full-height_w_footer.php</title>

  <style>
    *{
      margin: 0;
      padding: 0;
    }

    body{
      font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
      font-weight: normal;
      font-size: 1em;
      line-height: 1.4em;
      color: #000;
    }

    h1, h2, h3, h4{
      padding: 0.5em 0 0.5em 0;
      font-weight: bold;
      text-align: left;
    }

    h1{
      border-bottom: solid 2px #000;
    }

    p{
      padding: 0 0 1em 0;
    }

    #containerMast_fixed{
      position: fixed;
      top: 0;
      width: 100%;
      box-sizing: border-box;
      padding: 0 2rem 1rem 2rem;
      background-color: #FFF;
    }

    #containerBody{
      width: 100%;
      box-sizing: border-box;
      padding: 5.5rem 2rem 2rem 2rem;
    }

    .flexBox{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      margin: 0 auto;
    }

    #footer{
      position: fixed;
      position: -webkit-sticky;
      position: sticky;
      bottom: 0;
      left: 0;
      padding: 0.5rem 2rem;
      text-align: left;
      background-color: #DDD;
    }
  </style>
</head>

<body>
  <!-- Mast -->
  <div id="containerMast_fixed">
    <h1>MySite</h1>
  </div>
  
  <!-- Body -->
  <div id="containerBody">    
    
    <!-- Flex Container -->
    <div class="flexBox">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id justo rhoncus, finibus nisl sit amet, pretium nibh. Aliquam nec turpis auctor justo fringilla aliquet et vitae magna. Vestibulum est mauris, condimentum id pulvinar sed, volutpat eu massa. Morbi cursus lacus in lectus venenatis gravida. Ut facilisis mollis hendrerit. Maecenas a nunc erat. Quisque erat arcu, facilisis sed consectetur vel, efficitur at quam. Pellentesque semper est nec arcu imperdiet, id facilisis neque luctus. Cras in rutrum ante, nec fringilla tortor. Pellentesque ac nibh volutpat, bibendum mi non, ultricies nisl. Sed malesuada condimentum nunc ut imperdiet. Pellentesque faucibus eu lorem aliquam volutpat. Duis gravida aliquet ultricies. Nam eu tempus lectus.</p>

      <p>Duis semper commodo gravida. Aenean dolor mauris, laoreet nec tempus id, congue vitae enim. Morbi at ultrices nisl. Maecenas quis lorem sollicitudin, fringilla elit eget, mollis velit. Morbi gravida consequat nisl, eget accumsan velit. Ut feugiat quis diam ac aliquam. Aenean ornare placerat hendrerit. Donec vel nulla quis sapien laoreet dictum et id nulla.</p>

      <p>Donec eleifend porta ullamcorper. Sed diam tortor, ornare vel gravida non, tristique in sem. Sed vel condimentum odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis eros libero, gravida at egestas ac, ultricies in erat. Vestibulum condimentum lorem in erat mollis, in fermentum orci consectetur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum venenatis pulvinar ullamcorper. Etiam sollicitudin vitae metus vel posuere. Quisque viverra, libero id egestas consequat, ipsum lorem varius arcu, semper condimentum ex eros id ex. Curabitur tincidunt felis ultrices, blandit ipsum in, vestibulum mauris.</p>
<!--
      <p>Nam ullamcorper diam nunc, sed dignissim augue lacinia ac. Quisque bibendum ipsum consequat, aliquet metus a, tempor elit. Suspendisse porta dui eget lacinia maximus. Donec non sem aliquet, varius urna sit amet, rhoncus dolor. Curabitur nulla sem, finibus sit amet aliquam in, viverra vitae dolor. Suspendisse quis luctus massa, at rutrum ante. Etiam pharetra, metus tempor pharetra molestie, magna dui iaculis ligula, vel suscipit libero odio nec orci.</p>

      <p>Cras condimentum feugiat urna, sagittis viverra lacus consectetur at. Morbi id ex eget urna fermentum tempor ac a enim. Fusce sed vestibulum ipsum. Nunc convallis, ex ut fringilla euismod, dolor felis fringilla mauris, eget bibendum urna justo ut est. Donec consectetur sapien non ultricies viverra. Nam congue vel dolor nec iaculis. Pellentesque imperdiet nibh risus, at facilisis metus aliquam porttitor. Mauris malesuada nec nisi ac pellentesque. Vivamus cursus feugiat mi, at interdum magna suscipit a. Suspendisse potenti. Donec lacinia posuere ex sit amet interdum. Aliquam nec ex mi. Vivamus nec euismod tellus. Vestibulum rhoncus placerat sollicitudin. Nam facilisis non metus ut tincidunt. Vivamus eget semper elit.</p>

      <p>Vivamus vestibulum molestie lectus, ut tristique tellus imperdiet at. Vivamus pretium luctus diam in congue. Mauris urna quam, eleifend non magna eu, scelerisque pulvinar erat. Donec ac velit quam. Vivamus fringilla, ligula vel sodales iaculis, quam lorem auctor arcu, eget dictum enim lacus et sapien. Praesent nec ipsum nec velit rutrum ultrices. Nullam facilisis sem pretium felis maximus tempor. Morbi cursus mollis convallis. Curabitur vel justo consequat sapien gravida malesuada. Mauris sit amet arcu vel lacus condimentum finibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus rutrum eu sapien quis interdum.</p>

      <p>Aenean magna nisl, tempus sed quam sit amet, tincidunt euismod velit. Aenean eleifend, diam in ultricies pulvinar, justo eros viverra ligula, sit amet facilisis ipsum erat et metus. Nunc finibus, turpis ut hendrerit pharetra, leo risus sollicitudin mi, vel porttitor est diam eu odio. Mauris euismod, dolor quis molestie malesuada, libero mauris lobortis eros, eu euismod massa mi at tortor. Nulla dictum, metus eget pulvinar feugiat, leo enim varius mauris, nec tincidunt lorem neque at elit. Fusce sodales nisi arcu, eu porttitor enim lacinia id. Pellentesque aliquet eget augue vel sodales. Aliquam quis elementum mauris. Proin luctus luctus convallis. Pellentesque cursus dolor vel eleifend consequat. Integer metus nibh, pharetra id interdum in, accumsan sed leo. Ut tortor urna, placerat quis suscipit quis, convallis sit amet diam.</p>
-->      
    </div><!-- End of .flexBox -->
    
  </div><!-- End of #containerBody -->

  <!-- Footer -->
  <div id="footer">
    <a href="">Contact us</a>
  </div>  

</body>

</html>

If you run it as-is, then you can see the footer in floating half-way down.

And if you uncomment the rest of Lorem Ipsum, then the footer does move to the bottom of the screen - but that isn’t the scenario where I need help.

In the old days I think you would use height: 100% or something, but it seems to me that only worked for some browser, and I need full support on all devcies.

Try this but don’t ask me why it works :slight_smile:

    #footer{
      position: -webkit-sticky;
      position: sticky;
      position: fixed; ! important;
      bottom: 0; 
      left: 0; 
      padding: 0.5rem 2rem;
      text-align: left;
      background-color: #DDD;
      width: 100%; /* auto; */
    }

I had to remove the semicolon after fixed, but it does seem to work.

Not to be greedy, but…

1.) If anyone can explain how John’s code works that would be useful.

2.) Ideally I would like my code to behave like this…

If there is not enough content to naturally push the footer to the bottom of the screen, then my CSS should snap it down to the bottom for me, however, if there is more than enough content to fill the screen, then I want the footer to naturally get pushed below the viewport so you can only see the footer by scrolling down the page.

To me this is the best f both worlds in that in the first scenario the footer is out of the way at the bottom of the screen for content-light pages, but in the second scenario the footer does is not permanently attached to the bottom of the viewport as this wastes precious real-estate, and so if you want to see the footer then you have to scroll.

Of course what I am asking for may not always be the best design, but for my current site it seems to make the most sense.

So how can I properly code things so my CSS does this and so it supports all devices?

Thanks!

This is called a sticky footer rather than a fixed footer and the best way to accomplish it these days is with a flexbox layout taking up a min-height of the viewport which can be done with viewport units (min-height:100vh).

Here’s a rough re-jig of your code to show it in action.

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>sp_full-height_w_footer.php</title>
<style>
/* too broad a rule and breaks form controls. Instead address directly on elements you use
* {
	margin: 0;
	padding: 0;
}
*/

/* use border box model for ease of use and consistency as some form controls use this model by default anyway*/
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
html, body {
	margin:0;
	padding:0;
}
body {
	font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
	/*font-weight: normal; its already normal no need to say again */
	/*font-size: 1em; its already this no need to say again*/
	line-height: 1.4;/* use untiless line heights for better control. Ignore naysayers*/
	color: #000;
	background:#fff;/* just to be sure as black text on a black background is hard to see*/
}
body {
	display:flex;/* make body element a full height flex container*/
	flex-direction:column;/* lets go vertical*/
	min-height:100vh;/* take up full viewport height to start with*/
}
h1, h2, h3, h4 {
	padding: 0.5rem 0;
	font-weight: bold;
	text-align: left;
	margin:0;
}
.containerMast_fixed h1 {
	border-bottom: solid 2px #000;
}
p {
	padding: 0 0 1rem 0;
}
/* use only classes for all styling to avoid later specificity issues*/
.containerMast_fixed {
	position: fixed;/* fallback for older browsers*/
	position:-webkit-sticky;/* for ios*/
	position:sticky;/* for modern browsers and avoids covering up the initial content and allows for fluid height headers in responsive design*/
	top: 0;
	left:0;
	width: 100%;
	box-sizing: border-box;
	padding: 0 2rem 1rem 2rem;
	background-color: #FFF;
}
.containerBody {
	flex:1 0 0%;/* make this element take up all available space and thus push footer to the bottom automatically*/
	padding:2rem;
	background:#f9f9f9;/* just for testing to show extent of container*/
}
/* No need for this unless you need some flex boxes in this section
.flexBox {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin: 0 auto;
}
*/
.footer {
	padding: 0.5rem 2rem;
	text-align: left;
	background-color: #DDD;
}
</style>
</head>
<body>
<!-- Mast -->
<header class="containerMast_fixed">
  <h1>MySite</h1>
</header>

<!-- Body -->
<div class="containerBody"> 
  
  <!-- Removed this flexbox container as badly named and no need in demo unle4ss you have ulterior motives for this --> 
  <!-- Flex Container 
    <div class="flexBox"></div>
    --> 
  <!-- End of .flexBox -->
  
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id justo rhoncus, finibus nisl sit amet, pretium nibh. Aliquam nec turpis auctor justo fringilla aliquet et vitae magna. Vestibulum est mauris, condimentum id pulvinar sed, volutpat eu massa. Morbi cursus lacus in lectus venenatis gravida. Ut facilisis mollis hendrerit. Maecenas a nunc erat. Quisque erat arcu, facilisis sed consectetur vel, efficitur at quam. Pellentesque semper est nec arcu imperdiet, id facilisis neque luctus. Cras in rutrum ante, nec fringilla tortor. Pellentesque ac nibh volutpat, bibendum mi non, ultricies nisl. Sed malesuada condimentum nunc ut imperdiet. Pellentesque faucibus eu lorem aliquam volutpat. Duis gravida aliquet ultricies. Nam eu tempus lectus.</p>
  <p>Duis semper commodo gravida. Aenean dolor mauris, laoreet nec tempus id, congue vitae enim. Morbi at ultrices nisl. Maecenas quis lorem sollicitudin, fringilla elit eget, mollis velit. Morbi gravida consequat nisl, eget accumsan velit. Ut feugiat quis diam ac aliquam. Aenean ornare placerat hendrerit. Donec vel nulla quis sapien laoreet dictum et id nulla.</p>
  <p>Donec eleifend porta ullamcorper. Sed diam tortor, ornare vel gravida non, tristique in sem. Sed vel condimentum odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis eros libero, gravida at egestas ac, ultricies in erat. Vestibulum condimentum lorem in erat mollis, in fermentum orci consectetur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum venenatis pulvinar ullamcorper. Etiam sollicitudin vitae metus vel posuere. Quisque viverra, libero id egestas consequat, ipsum lorem varius arcu, semper condimentum ex eros id ex. Curabitur tincidunt felis ultrices, blandit ipsum in, vestibulum mauris.</p>
  <!--
      <p>Nam ullamcorper diam nunc, sed dignissim augue lacinia ac. Quisque bibendum ipsum consequat, aliquet metus a, tempor elit. Suspendisse porta dui eget lacinia maximus. Donec non sem aliquet, varius urna sit amet, rhoncus dolor. Curabitur nulla sem, finibus sit amet aliquam in, viverra vitae dolor. Suspendisse quis luctus massa, at rutrum ante. Etiam pharetra, metus tempor pharetra molestie, magna dui iaculis ligula, vel suscipit libero odio nec orci.</p>

      <p>Cras condimentum feugiat urna, sagittis viverra lacus consectetur at. Morbi id ex eget urna fermentum tempor ac a enim. Fusce sed vestibulum ipsum. Nunc convallis, ex ut fringilla euismod, dolor felis fringilla mauris, eget bibendum urna justo ut est. Donec consectetur sapien non ultricies viverra. Nam congue vel dolor nec iaculis. Pellentesque imperdiet nibh risus, at facilisis metus aliquam porttitor. Mauris malesuada nec nisi ac pellentesque. Vivamus cursus feugiat mi, at interdum magna suscipit a. Suspendisse potenti. Donec lacinia posuere ex sit amet interdum. Aliquam nec ex mi. Vivamus nec euismod tellus. Vestibulum rhoncus placerat sollicitudin. Nam facilisis non metus ut tincidunt. Vivamus eget semper elit.</p>

      <p>Vivamus vestibulum molestie lectus, ut tristique tellus imperdiet at. Vivamus pretium luctus diam in congue. Mauris urna quam, eleifend non magna eu, scelerisque pulvinar erat. Donec ac velit quam. Vivamus fringilla, ligula vel sodales iaculis, quam lorem auctor arcu, eget dictum enim lacus et sapien. Praesent nec ipsum nec velit rutrum ultrices. Nullam facilisis sem pretium felis maximus tempor. Morbi cursus mollis convallis. Curabitur vel justo consequat sapien gravida malesuada. Mauris sit amet arcu vel lacus condimentum finibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus rutrum eu sapien quis interdum.</p>

      <p>Aenean magna nisl, tempus sed quam sit amet, tincidunt euismod velit. Aenean eleifend, diam in ultricies pulvinar, justo eros viverra ligula, sit amet facilisis ipsum erat et metus. Nunc finibus, turpis ut hendrerit pharetra, leo risus sollicitudin mi, vel porttitor est diam eu odio. Mauris euismod, dolor quis molestie malesuada, libero mauris lobortis eros, eu euismod massa mi at tortor. Nulla dictum, metus eget pulvinar feugiat, leo enim varius mauris, nec tincidunt lorem neque at elit. Fusce sodales nisi arcu, eu porttitor enim lacinia id. Pellentesque aliquet eget augue vel sodales. Aliquam quis elementum mauris. Proin luctus luctus convallis. Pellentesque cursus dolor vel eleifend consequat. Integer metus nibh, pharetra id interdum in, accumsan sed leo. Ut tortor urna, placerat quis suscipit quis, convallis sit amet diam.</p>
--> 
  
</div>
<!-- End of .containerBody --> 

<!-- Footer -->
<div class="footer"> <a href="">Contact us</a> </div>
</body>
</html>

The code is heavily commented to show how this is done so please refer to the comments before asking questions on how it works and then research the subject a little more on your own now that you know what it is called.

Before flexbox was implemented a sticky footer could be achieved with the display:table properties but these days is much easier with flexbox.

It doesn’t work in the way that the original code was intended because you made position:fixed as the last rule and also made i !important which over-rides the sticky positioning :slight_smile:

The order is very important and should be:

position: fixed;
position: -webkit-sticky;
position: sticky;

However although sticky positioning can be used instead of fixed elements the html code has to be organised in the right way for this to happen as the element becomes sticky in relation to its parent container which may not be the viewport (unlike fixed positioning) unless the code specifically allows this.

I shouldn’t really have posted at this time as I am just about to go away on holiday for a month so may not be able to answer any more questions for a while but I didn’t want to leave without correcting this error.:slight_smile:

4 Likes

@PaulOB,

Wow! Thanks for the working code and all of the comments!! :+1:

I have several questions for you, but it looks like I will have to wait until you get back from holiday?!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.