How can I make a div extend to a sticky footer?

StackOverflow https://stackoverflow.com/questions/21566920

  •  07-10-2022
  •  | 
  •  

Pergunta

I am using a sticky footer and have a div that I need to have extend all the way down to the footer. Unfortunately when I add height: 100%, it doesn't help. I've also tried to make it display as a table in the css but that didn't help either.

You can see it here: http://jsfiddle.net/NDk5f/2/

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en"><head>
  <meta charset="utf-8">
  <link href="css/test.css" rel="stylesheet">
</head>
<body>

<div class="navbar">
Navbar
</div>


<div id="wrap">
  <div class="container fill">
    <div class="page-header">
      <h1>Sticky footer</h1>
    </div>
    <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
    <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
  </div>
  <div id="push"></div>
</div>


<div id="footer">
  Footer
</div>


</body>
</html>

CSS:

*{
    margin: 0;
}

html,
body {
  height: 100%;
}
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -50px;
}
#push,
#footer {
  height: 50px;
}
#footer {
  background-color: #f5f5f5;
}

/* Apply class .fill to div to be stretched to bottom of page */
.fill{
    height:100%;
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; /*set left/right padding according to needs*/
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: red;
    padding-top:75px;
}
  .fill .row {
      height: 100%;
      display: table-row;
  }


.container
 {
  width: 940px;
}

.container {
  margin-right: auto;
  margin-left: auto;
}

.container:before,
.container:after {
  display: table;
  line-height: 0;
  content: "";
}

.container:after {
  clear: both;
}

.navbar {
  position: relative;
  z-index: 2;
  margin-bottom: 20px;
  overflow: visible;
  background-color: orange;
}
Foi útil?

Solução

The easiest method is to use box-sizing: border-box and set fixed percentage heights on the elements. If you're looking for fixed heights on the footer/nav and dynamic heights on the content, it'll be tricky.

Usually I use a wrapper that's position: absolute to the viewport just below the header and just above the footer, and then a div inside that for the content, which uses height: 100%

The second method:

<nav>nav</nav>
<div id="wrap">
    <div class="content">content</div>    
</div>
<footer>footer</footer>

html,body { margin: 0 }
nav, footer { height: 20px; background: blue }
footer { position: absolute; bottom: 0; width: 100% }
#wrap { background: gray; position: absolute; bottom: 20px; top: 20px; right: 100px; left: 100px }
#wrap .content { height: 100% }

The wrapper will act as the fixed height for the content when the window is resized.

Fiddle

Luckily as browser's adopt css3, this will be even easier with flexbox.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top