How to make both a div and nav bars span full height without hardcoding

by Daneolog   Last Updated March 14, 2019 21:05 PM

I've been trying to create a simple webpage with this format:

  1. Header (nav bar with a bunch of tabs, height (let's say 50px)
  2. Main content (div)
  3. Footer (nav bar with a height of also around 50px)

Code for this is found below:

<!DOCTYPE html>
<html>
  <head></head>
  <body style="margin: 0">
    <div style="height: 50px; background: yellow">hi</div>
    <div style="height: 50px;">content</div>
    <div style="height: 50px; background: yellow"></div>
  </body>
</html>

The issue is that obviously the middle div's height is hardcoded, and that doesn't seem too great...

Try 1

I tried to fix this by using the version-specific calc() for CSS, and I've managed to produce some pretty good results:

<!DOCTYPE html>
<html style="height: 100%;">
  <head></head>
  <body style="margin: 0; height: 100%;">
    <div style="height: 50px; background: yellow">hi</div>
    <div style="height: calc(100% - 100px);">content</div>
    <div style="height: 50px; background: yellow"></div>
  </body>
</html>

The issue with this is that 1) it uses a hardcoded value of 100px, and since my actual tab bars have variable size depending on how big my font is, this isn't really too good. Looks really good though...

Try 2

The second thing I tried was to use flex-box, another version specific method. The issue with this is that it just didn't work...? Not even sure why it didn't work, but I'm not as proficient in flex-box at all.

<!DOCTYPE html>
<html style="height: 100%">
  <head></head>
  <body style="margin: 0; height: 100%;">
    <div style="height: 50px; background: yellow">hi</div>
    <div style="display: flex;">content</div>
    <div style="height: 50px; background: yellow"></div>
  </body>
</html>

These are the only things I've tried... I know there's a simple way to do this with display: fixed, but it allows text to go behind my header and footer, and I don't really want that either. Thanks in advance for the help!

Tags : html css


Related Questions


Why are people making tables with divs?

Updated April 03, 2015 21:19 PM



How to open a html file using php

Updated August 20, 2015 18:02 PM