CODEWITHSUNDEEP
htmlcss
StarDart
StarDart

Reputation: 251

100% Height Navbar in CSS?

I've looked at dozens of similar questions on Stack Overflow and tried many of the answers, but I still haven't been able to get this to work.

How can I make the nav element of my page take up the entire height of the site? So, currently, because there's more content in the main section of the page it leaves a gap between the bottom of the nav and the footer (run code for example). I'd like this gap to be filled with empty nav and retain the same background colour.

Here's my HTML and CSS:

body {
  width: 960px;
  margin: auto;
  font-family: Calibri;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  background-color: #FFF8ED;
}

header {
  text-align: center;
  width: 960px;
  border: 1px solid black;
  margin-top: 10px;
}

/* Navigation Bar Style */
nav {
  float: left;
  width: 160px;
  display: table-cell;
}

nav ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  background-color: #333333;
}

nav li a {
  display: block;
  text-decoration: none;
  padding: 10px;
  color: white;
}

.active {
  background-color: #FF791C;
  color: white;
}

nav li a:hover:not(.active) {
  background-color: #CC6016;
  color: white;
}

.menu {
  list-style-type: none;
  display: block;
  margin: 0px;
  padding: 0px;
}

.dropdown ul {
  overflow: hidden;
  height: 0px;
  font-size: small;
  margin-left: 25px;

  -webkit-transition: height 1s ease;
     -moz-transition: height 1s ease;
       -o-transition: height 1s ease;
      -ms-transition: height 1s ease;
          transition: height 1s ease;
}

.dropdown:hover ul {
  height: 140px;
}
/**/

section {
  float: left;
  width: 780px;
  padding: 0px 10px;
}

footer {
  background-color: #333333;
  color: #FFFFFF;
  text-align: center;
  width: 960px;
  padding: 10px;
  clear: both;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test HTML Page</title>
  <link rel="stylesheet" href="style.css">
<body>
  <header>
    <h1>Heading</h1>
  </header>
  <nav>
    <ul class="menu">
      <li><a href="#" class="active">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <div class="dropdown">
        <li><a href="#">&#9660; Page 2</a></li>
          <ul>
            <li><a href="pages/step1.html">Option 1</a></li>
            <li><a href="pages/step2.html">Option 2</a></li>
            <li><a href="pages/step3.html">Option 3</a></li>
            <li><a href="pages/step4.html">Option 4</a></li>
          </ul>
      </div>
      <li><a href="#">Page 3</a></li>
    </ul>
  </nav>
  <section>
    <h2>Heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec est nunc, iaculis in mauris vitae, commodo ullamcorper lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere in libero id dictum. Phasellus viverra rutrum mollis.</p>
    <h3>Heading</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec est nunc, iaculis in mauris vitae, commodo ullamcorper lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere in libero id dictum. Phasellus viverra rutrum mollis.</p>
    <h3>Heading</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec est nunc, iaculis in mauris vitae, commodo ullamcorper lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere in libero id dictum. Phasellus viverra rutrum mollis.</p>
  </section>
  <footer>
    Copyright &copy; 1999 - 2016
  </footer>
</body>
</html>

The columns don't need to be the same height, just I don't want the nav shorter than the main (so it reaches all the way to the footer).

Thanks for any assistance!

Upvotes: 0

Views: 94

Answers (2)

Rounin
Rounin

Reputation: 29463

One solution is to contain both <nav> and <section> inside <main>, and give <main> the following background-color:

main {
background-color: rgb(51,51,51);
}

N.B. At this point, <main> contains only 2 floated elements, so it appears to occupy no vertical space within the page flow and the background-color won't be visible.

Next up, auto-clear <main> so that it does occupy vertical space within the page flow and the background-color becomes visible:

main::after {
content:'';
display:block;
clear:both;
}

Finally, re-color <section> so that it has the same background-color as the page:

section {
background-color:rgb(255,248,237);
}

Complete Example:

body {
  width: 960px;
  margin: auto;
  font-family: Calibri;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  background-color: #FFF8ED;
}

header {
  text-align: center;
  width: 960px;
  border: 1px solid black;
  margin-top: 10px;
}

/* Navigation Bar Style */
nav {
  float: left;
  width: 160px;
  display: table-cell;
}

nav ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  background-color: #333333;
}

nav li a {
  display: block;
  text-decoration: none;
  padding: 10px;
  color: white;
}

.active {
  background-color: #FF791C;
  color: white;
}

nav li a:hover:not(.active) {
  background-color: #CC6016;
  color: white;
}

.menu {
  list-style-type: none;
  display: block;
  margin: 0px;
  padding: 0px;
}

.dropdown ul {
  overflow: hidden;
  height: 0px;
  font-size: small;
  margin-left: 25px;

  -webkit-transition: height 1s ease;
     -moz-transition: height 1s ease;
       -o-transition: height 1s ease;
      -ms-transition: height 1s ease;
          transition: height 1s ease;
}

.dropdown:hover ul {
  height: 140px;
}
/**/

section {
  float: left;
  width: 780px;
  padding: 0px 10px;
}

footer {
  background-color: #333333;
  color: #FFFFFF;
  text-align: center;
  width: 960px;
  padding: 10px;
  clear: both;
}


main {
  background-color: rgb(51,51,51);
}

main::after {
content:'';
display:block;
clear:both;
}

section {
background-color:rgb(255,248,237);
}
 <header>
    <h1>Heading</h1>
  </header>

<main>

  <nav>
    <ul class="menu">
      <li><a href="#" class="active">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <div class="dropdown">
        <li><a href="#">&#9660; Page 2</a></li>
          <ul>
            <li><a href="pages/step1.html">Option 1</a></li>
            <li><a href="pages/step2.html">Option 2</a></li>
            <li><a href="pages/step3.html">Option 3</a></li>
            <li><a href="pages/step4.html">Option 4</a></li>
          </ul>
      </div>
      <li><a href="#">Page 3</a></li>
    </ul>
  </nav>
  <section>
    <h2>Heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec est nunc, iaculis in mauris vitae, commodo ullamcorper lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere in libero id dictum. Phasellus viverra rutrum mollis.</p>
    <h3>Heading</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec est nunc, iaculis in mauris vitae, commodo ullamcorper lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere in libero id dictum. Phasellus viverra rutrum mollis.</p>
    <h3>Heading</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec est nunc, iaculis in mauris vitae, commodo ullamcorper lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere in libero id dictum. Phasellus viverra rutrum mollis.</p>
  </section>
</main>

  <footer>
    Copyright &copy; 1999 - 2016
  </footer>

Upvotes: 1

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

Remove float: left from both nav and section.

Then add these styles:

section {
  display: table-cell;
}

nav {
  background: #333333;
  vertical-align: top;
}


body {
  width: 960px;
  margin: auto;
  font-family: Calibri;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  background-color: #FFF8ED;
}
header {
  text-align: center;
  width: 960px;
  border: 1px solid black;
  margin-top: 10px;
}
/* Navigation Bar Style */

nav {
  width: 160px;
  display: table-cell;
}
nav ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  background-color: #333333;
}
nav li a {
  display: block;
  text-decoration: none;
  padding: 10px;
  color: white;
}
.active {
  background-color: #FF791C;
  color: white;
}
nav li a:hover:not(.active) {
  background-color: #CC6016;
  color: white;
}
.menu {
  list-style-type: none;
  display: block;
  margin: 0px;
  padding: 0px;
}
.dropdown ul {
  overflow: hidden;
  height: 0px;
  font-size: small;
  margin-left: 25px;
  -webkit-transition: height 1s ease;
  -moz-transition: height 1s ease;
  -o-transition: height 1s ease;
  -ms-transition: height 1s ease;
  transition: height 1s ease;
}
.dropdown:hover ul {
  height: 140px;
}
/**/

section {
  width: 780px;
  padding: 0px 10px;
}
footer {
  background-color: #333333;
  color: #FFFFFF;
  text-align: center;
  width: 960px;
  padding: 10px;
  clear: both;
}

section {
  display: table-cell;
}

nav {
  background: #333333;
  vertical-align: top;  
}
<header>
  <h1>Heading</h1>
</header>
<nav>
  <ul class="menu">
    <li><a href="#" class="active">Home</a>
    </li>
    <li><a href="#">Page 1</a>
    </li>
    <div class="dropdown">
      <li><a href="#">&#9660; Page 2</a>
      </li>
      <ul>
        <li><a href="pages/step1.html">Option 1</a>
        </li>
        <li><a href="pages/step2.html">Option 2</a>
        </li>
        <li><a href="pages/step3.html">Option 3</a>
        </li>
        <li><a href="pages/step4.html">Option 4</a>
        </li>
      </ul>
    </div>
    <li><a href="#">Page 3</a>
    </li>
  </ul>
</nav>
<section>
  <h2>Heading</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec est nunc, iaculis in mauris vitae, commodo ullamcorper lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere in libero id dictum. Phasellus viverra rutrum mollis.</p>
  <h3>Heading</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec est nunc, iaculis in mauris vitae, commodo ullamcorper lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere in libero id dictum. Phasellus viverra rutrum mollis.</p>
  <h3>Heading</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec est nunc, iaculis in mauris vitae, commodo ullamcorper lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere in libero id dictum. Phasellus viverra rutrum mollis.</p>
</section>
<footer>
  Copyright &copy; 1999 - 2016
</footer>

Upvotes: 2

Related Questions