Doubt with height in a DIV

Question

I have a problem that seems very simple to me and I’ve done it before, but I just don’t remember how!

Assuming a page with 3 Ivs (header, content and footer) how do I make the content div take up all the free space of the page?

Ex:

<div id="header">
    barra de cabeçalhos - está OK!
</div>
<div id="content">
    área de conteúdo. Deverá preencher 100% da área disponivel entre o header e o footer
</div>
<div id="footer">
    barra de rodapé, fixo no bottom da página, está OK
</div>

Here the current CSS:

#header {
     width: 100%;
     height: 65px;
     line-height: 65px;
     vertical-align: middle;
     overflow: hidden;
}
#footer {
    position:fixed;
    left: 0px;
    bottom: 0px;
    height: 15px;
    width: 100%;
    background: #434;
    padding: 6px;
}

What is the proper CSS for #content?

I’ve tried a few different solutions, but without success... Remembering that body and html are already 100% in another CSS snippet

Answer 1

Well, if you don’t need to support very old browsers you can use the flexbox of CSS3, it fits like a glove in your case.

Take the example

body {
  color: #fff;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

#header,
#content,
#footer {
  padding: 1em;
}

#header,
#footer{
  background-color: #3498db;
}

#content {
  background-color: #2980b9;
  flex: 1;
}

<div id="header">
barra de cabeçalhos - está OK!
</div>
<div id="content">
área de conteúdo. Deverá preencher 100% da área disponivel entre o header e o footer
</div>
<div id="footer">
barra de rodapé, fixo no bottom da página, está OK
</div>

Here you can find great examples of what you can do with flex www.philipwalton.github.io/Solved-by-flexbox

And here the compatibility table www.caniuse.com/#feat=flexbox

Answer 2

You can use the method CALC

As follows:

#content {
    height: calc(100% - 80x); /* 80 porque é 65+15 */
    /* height: 100% também pode funcionar! */
    background-color: gold;
}

/* Veja se isto está igual: */

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

Test this clicking here. :)

Answer 3

Another way is a height: auto, but with a min-height: 100%.

Jsfiddle

html, body{
 height: 100%;
}
#header {
  width: 100%;
  height: 65px;
  line-height: 65px;
  vertical-align: middle;
  overflow: hidden;
  background: #333;
}

#content {
  height: auto;
  min-height: 100%;
  background: #ccc;
}

#footer {
  position: fixed;
  left: 0px;
  bottom: 0px;
  height: 15px;
  width: 100%;
  background: #434;
  padding: 6px;
}

<div id="header">
  barra de cabeçalhos - está OK!
</div>
<div id="content">
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus faucibus risus, sed fermentum risus condimentum eu. Suspendisse potenti. Pellentesque vel commodo nisi. Aliquam at arcu nec enim auctor ultricies. Quisque ac leo auctor, semper nisl nec, porta dolor. Duis eget ligula non leo lacinia rhoncus eget id nisi. Sed sit amet elit mi. Aliquam at mollis neque. Vestibulum ornare imperdiet turpis, sed tincidunt mi pulvinar in. Maecenas volutpat viverra augue a tempus. Donec eu aliquet dolor.

Mauris vitae urna sodales, dignissim felis ac, porttitor mauris. Nam tortor nisi, suscipit vitae diam nec, vehicula pulvinar neque. Sed sed luctus neque, quis fermentum odio. Pellentesque eu porttitor orci, sit amet iaculis leo. Mauris in ornare massa. Phasellus dolor leo, egestas vitae orci venenatis, suscipit condimentum lacus. Sed quis nisl placerat, tristique lacus ut, bibendum diam. Cras massa lacus, consequat at scelerisque a, euismod vel neque.

Cras finibus orci non scelerisque ornare. Morbi eu dapibus arcu. Maecenas tempor leo eu ligula fringilla, in egestas arcu pulvinar. Nunc eu purus non felis congue facilisis vitae porttitor turpis. Sed ullamcorper massa quis tortor convallis, id eleifend nisi sagittis. Ut posuere lacinia libero ac cursus. Sed luctus eget magna quis sollicitudin. </p>
</div>
<div id="footer">
  barra de rodapé, fixo no bottom da página, está OK
</div>

Without the height: auto, when the content of div#content is greater than the height of the viewport, the content will exceed the div. Behold in this example.

But with the height: auto and the min-height: 100% that won’t happen, how can you see here. So that the footer do not overlap the content I gave to the body one padding-bottom: 5px.

Answer 4

I’ll use position: absolute for such;

html, body, main, header, footer, section, div {
  box-sizing: border-box;
}
html, body, main {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  background-color: whitesmoke;
}

header, footer {
  position: absolute;
  width: 100%;
  height: 40px;
  box-shadow: 0px 0px 10px black;
  background-color: white;
  z-index: 2;
}

header {
  top: 0px;
}

footer {
  bottom: 0px;
}

section {
  position: absolute;
  width: 100%;
  top: 40px; /* height to header */
  bottom: 40px; /* height to footer */
  overflow-y: auto;
  z-index: 1;
}

<main>
  <header>
    barra de cabeçalhos - está OK!
  </header>
  <section>
    área de conteúdo. Deverá preencher 100% da área disponivel entre o header e o footer
    <div id="lipsum">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet lorem imperdiet, aliquam justo condimentum, euismod sapien. Aliquam vulputate sodales ligula eu convallis. Mauris vulputate enim et velit sagittis, porta efficitur lectus ultricies. Sed tincidunt libero eu aliquet pharetra. Nam quis vestibulum augue. Vestibulum facilisis ipsum urna, in tempus nunc condimentum at. In nisl erat, tempor eu nisi a, hendrerit ullamcorper nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec quis leo at justo fringilla placerat at sit amet lorem. Maecenas placerat scelerisque magna nec varius. Nulla facilisi. Morbi ipsum velit, euismod vitae dolor ut, blandit laoreet magna.
      </p>
      <p>
        Sed eu mi sem. Suspendisse consequat leo eu maximus fringilla. Suspendisse ornare pellentesque semper. Pellentesque ac ipsum ac diam tempor mollis. Suspendisse sit amet commodo nisi. Donec mattis ipsum quis dolor finibus venenatis. Nam at tincidunt tortor. Sed pretium tellus quis justo suscipit, quis elementum ex blandit. Donec sit amet rhoncus diam. Fusce sagittis laoreet interdum.
      </p>
      <p>
        Maecenas ac tortor sed elit interdum placerat nec ac justo. Quisque a nibh semper, feugiat augue id, iaculis orci. Vivamus sollicitudin ante nec aliquam vehicula. Fusce viverra venenatis diam eu tincidunt. Fusce ornare eros vitae metus faucibus tincidunt quis sit amet tellus. Nam dignissim scelerisque quam ac ullamcorper. Suspendisse nibh enim, ultricies non pretium et, tempus id ligula. Quisque interdum erat odio, sit amet dictum lectus vehicula consequat. Aliquam ac rutrum dui, vitae sollicitudin libero.
      </p>
      <p>
        Sed fermentum nisi pharetra, varius urna ullamcorper, molestie dui. Quisque orci elit, commodo sit amet velit a, mollis facilisis lacus. Phasellus et lacus quis nisi dignissim ultrices ac vel libero. Quisque accumsan, nisi sed molestie tristique, elit dui sagittis lacus, sit amet tristique turpis erat eu lorem. Proin a gravida mauris. Pellentesque quis egestas leo. In eget enim dui. Fusce consequat sit amet orci ac gravida.
      </p>
      <p>
        Donec est nunc, venenatis eu justo quis, lobortis finibus lectus. Pellentesque convallis ultricies sodales. Pellentesque elementum sodales lacus, quis vehicula purus luctus ac. Nam vel elit eleifend, lobortis neque sit amet, hendrerit nulla. Nunc tincidunt, tortor at condimentum consequat, enim tellus elementum risus, vulputate tincidunt sapien elit nec est. Donec congue ex nec rutrum aliquam. Etiam nec aliquet erat.
      </p>
      <p>
        Morbi sed aliquet enim. Curabitur egestas et lorem vel ultrices. Aenean pharetra dui ac laoreet tempor. Praesent nec varius velit, nec varius ipsum. Aenean feugiat dui ipsum, non placerat augue congue non. Maecenas tincidunt arcu nec ex efficitur, sed pretium arcu aliquam. Aliquam tincidunt pretium mauris eget tincidunt.
      </p>
      <p>
        Sed vel justo condimentum, egestas purus et, commodo nibh. In fermentum placerat neque eu mollis. Fusce condimentum, augue ut porta congue, arcu leo sagittis nulla, vel convallis ante lorem a felis. Morbi sit amet augue sagittis velit condimentum pulvinar pellentesque et dolor. Pellentesque fermentum egestas ante, ut mattis enim blandit eget. Maecenas iaculis auctor tortor id bibendum. Fusce euismod augue nibh, ac feugiat odio convallis sed. Aliquam a augue ac sapien aliquet tincidunt. Duis viverra id arcu ac rhoncus. Sed volutpat, arcu in vulputate fermentum, erat arcu sagittis metus, id suscipit nulla erat eu nibh. Sed accumsan faucibus faucibus.
      </p>
      <p>
        Vestibulum dictum maximus est, eu suscipit neque sollicitudin eget. Aenean justo nibh, elementum vitae nisl ut, tincidunt porta elit. In tincidunt condimentum ornare. Pellentesque aliquam semper nisi non lacinia. Quisque porttitor rhoncus lorem, eu sollicitudin urna ornare non. Mauris ac mattis orci. Mauris facilisis iaculis pretium. Phasellus eget accumsan justo. Curabitur lacinia ullamcorper erat id pharetra.
      </p>
      <p>
        Morbi aliquet nulla ultrices urna interdum, id feugiat dui gravida. Nullam ullamcorper quam turpis, ut condimentum ipsum sodales a. Suspendisse libero arcu, varius nec consequat eget, placerat sed velit. Curabitur gravida consectetur nunc, sagittis venenatis massa rutrum non. Etiam consequat porttitor pulvinar. Pellentesque at congue massa. Integer non sapien ut eros tempor scelerisque.
      </p>
      <p>
        Nunc bibendum tellus nec neque pellentesque auctor. Morbi non luctus turpis, vitae pellentesque nunc. Etiam quis maximus enim. Suspendisse convallis, ex sed congue egestas, mi purus fermentum augue, in pharetra sem orci auctor velit. Fusce imperdiet orci sit amet nisl tempus, eu tincidunt odio lacinia. In sollicitudin sem sit amet tellus rhoncus, sagittis pulvinar nibh laoreet. Aenean scelerisque aliquet libero vitae ullamcorper. Praesent pellentesque efficitur massa, ac feugiat sem. Nunc quis tortor diam. Sed facilisis lectus ex, quis dictum sapien pellentesque ut. Nullam suscipit ullamcorper ante, at tempor justo commodo sed. Maecenas eros ipsum, sodales vitae dui sit amet, porta pretium nulla.
      </p>
      <p>
        Integer porttitor turpis in sem volutpat laoreet. Ut leo nisl, dapibus a nunc sed, tempus rhoncus arcu. Vivamus laoreet, velit hendrerit iaculis condimentum, ligula turpis semper leo, vel dignissim nunc urna quis justo. Fusce dapibus quis elit et facilisis. Nam congue congue iaculis. Vivamus sed vehicula leo, quis placerat nunc. Proin sit amet nunc pellentesque, porttitor ante at, consequat ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus consectetur venenatis sapien at gravida. Sed molestie eu urna vel luctus. Etiam fermentum diam dictum faucibus rhoncus. Integer pharetra, orci et tristique convallis, orci leo pretium lacus, vel porta est nisl iaculis est. Nullam nisi augue, imperdiet nec egestas sed, placerat eu arcu. Phasellus non rutrum risus, a tempor mi. Integer eget est eget dolor semper fringilla nec in sem.
      </p>
      <p>
        Sed accumsan convallis nulla, dignissim blandit tellus ultrices at. Sed volutpat commodo libero, ut tincidunt libero. Phasellus eu libero magna. Donec facilisis pulvinar sapien non luctus. Morbi luctus fermentum quam, eget euismod neque sodales vel. Sed consectetur pulvinar tortor, quis maximus metus blandit eget. Nulla vulputate ex diam, tincidunt convallis nibh condimentum sed. Etiam lacinia urna maximus, molestie purus dictum, consectetur ipsum. Proin tempus interdum elementum.
      </p>
      <p>
        Phasellus varius velit in porta molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse vehicula quam ligula, non mollis mi dignissim efficitur. Vivamus nec metus molestie, porta purus in, ullamcorper quam. Ut eget dignissim urna. Etiam lacinia et nulla nec ullamcorper. Cras in erat eget elit sollicitudin eleifend eget vitae eros. Nam scelerisque lacus vitae felis efficitur, blandit consectetur purus sodales. Praesent at sapien quis quam efficitur pharetra. Fusce fringilla ante ut nunc vulputate, ut scelerisque ligula bibendum. Etiam vel convallis lacus, ut finibus augue. Nulla facilisi. Integer mattis tellus vel augue malesuada tempor. Phasellus cursus enim ac massa semper varius. Nunc dapibus pellentesque nibh, sit amet sodales ligula tristique ac. Nullam bibendum sollicitudin purus quis hendrerit.
      </p>
      <p>
        Integer facilisis lorem consectetur, auctor turpis quis, eleifend felis. Ut mollis, mauris id convallis porta, urna metus blandit magna, non auctor tellus leo sit amet arcu. Proin tellus ligula, ullamcorper ut nisi quis, rhoncus varius dolor. Integer ultrices venenatis nibh, eget placerat ligula imperdiet non. Vestibulum tincidunt imperdiet dolor vitae ornare. Aenean in dignissim sapien. Quisque accumsan, dui eu sodales fermentum, justo mauris efficitur lectus, non porttitor ante nisi eu risus. In a metus pretium enim varius scelerisque eget quis nisl. Fusce ante sapien, aliquam sed dignissim sed, volutpat quis nisl. Aliquam massa ipsum, tincidunt in lacus vitae, fringilla sollicitudin tellus. Curabitur feugiat sem eget nisl convallis porttitor. Curabitur ac leo non ante porttitor pellentesque. Mauris et elit vel dui rhoncus congue.
      </p>
      <p>
        Sed rutrum augue quis ex condimentum scelerisque. Donec ut dolor dapibus, auctor quam vel, sollicitudin urna. Aenean eget justo feugiat, aliquam nisi ac, laoreet justo. Cras non nibh pharetra, rhoncus lacus eu, scelerisque nisl. Nulla vel nisl vel quam imperdiet scelerisque a vel enim. Aliquam imperdiet gravida lorem. Pellentesque molestie sed dui eu dignissim. Vivamus a eros at ante suscipit ornare. In commodo et erat eget bibendum. Quisque sodales rutrum urna. Phasellus eu tristique neque. Nulla molestie purus ut purus consectetur, vel fermentum justo pharetra.
      </p>
    </div>
  </section>
  <footer>
    barra de rodapé, fixo no bottom da página, está OK
  </footer>
</main>