Home/ Questions/Q 7066095
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T05:02:38+00:00

I’m trying to create a page with a header with a navigation menu and

  • 0

I’m trying to create a page with a header with a navigation menu and a content area that fills the rest of the page, the content have a 100% min-height but even when it’s empty it shows a vertical scrollbar because of the header size.

HTML relevant part:

<body>
  <div id="header">Davi Andrade</div>
  <nav>
    <ul>
      <li><a href="/">About</a></li>
      <li><a href="/">Portfolio</a></li>
      <li><a href="/">Downloads</a></li>
      <li><a href="index.html">Home</a></li>
    </ul>
  </nav>
  <div id="content">
    Text
  </div>
</body>

And the CSS:

html, body {
  background: #333333;
  font-family: "Segoe UI", "Lucida Grande", sans-serif;
  height: 100%;
  margin: 0;
  padding: 0;
}

#header {
  color: #b6b6b6;
  float: left;
  font-family: Megrim;
  font-size: 36px;
  margin: 18px 52px 18px 52px;
  text-shadow: 0 0 3px rgba(0, 18, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
}

nav li a {
  color: white;
  display: block;
  float: right;
  font-size: 1.3em;
  list-style: none;
  padding: 24px 48px 24px 0;
  text-decoration: none;
}

#content {
  clear: both;
  background: #3e3e3e;
  box-shadow: 0 -2px 3px rgba(0,0,0,0.35), 0 -1px 0 rgba(255,255,255,0.3);
  min-height: 100%;
}

There is any way to fix this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Depending on what you are trying to achieve, this layout can be achieved in one of two ways.

    Firstly, if you do not need anything at the foot of the page then you should just remove min-height and background-color off #content and place the background-color in the body instead. I would also change the header HTML structure slightly to make it a little more semantically correct and easier to work with:

    HTML

    <div id="header">
    <h1>Davi Andrade</h1>
    <nav>
        <ul>
            <li><a href="/">About</a></li>
            <li><a href="/">Portfolio</a></li>
            <li><a href="/">Downloads</a></li>
            <li><a href="index.html">Home</a></li>
        </ul>
    </nav>
</div>
<div id="content">
    ....
</div>

    CSS

    /* change original #header to h1 and add the following CSS */
#header {
    background: #333333;
    overflow: hidden;
}

/* remove back ground color from #content and add here */
html, body {
    ....
    background-color: #3e3e3e;
    ....
}

    Secondly, if you do need a footer at the bottom of the page then you will need to make the changes above and then wrap your HTML inside a container element with min-height: 100%. You can then use position: absolute to place the footer element at the bottom of the container element. There are a few other bits and pieces to it which I have explained in more detail within this Stackoverflow answer.

    With footer: http://jsfiddle.net/cNfWZ/1/

    Without footer: http://jsfiddle.net/cNfWZ/

    • 0