CSS - Content with 100% min-height creates a vertical scrollbar

Question

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?

It looks fine to me in Chrome and FF... Do you mean that the lighter grey area below has its own scrollbar or are you saying the content area is too large thus producing the normal scrollbar? — lambgrp425, Jan 14 '12 at 17:03
Take a look at this http://stackoverflow.com/questions/90178/make-a-div-fill-the-remaining-screen-space — Chuck Norris, Jan 14 '12 at 17:13
The content area is too large, it should show a scrollbar only when needed.. — Davi, Jan 14 '12 at 17:14
You must write some Javascript... I don't sure that it's possible with CSS. — Chuck Norris, Jan 14 '12 at 17:16
I would just change the body background to be the color you need and allow the content div to grow as needed. The effect should be the same. — lambgrp425, Jan 14 '12 at 17:47
It is possible with pure CSS and there are many of answers. The main question is though - do you actually need the div to the fill the screen, for example you need a footer to be at the bottom, or as @Mark says; can you not just set the color of the background on the body instead of that div? — My Head Hurts, Jan 14 '12 at 18:02
I'll need a footer. I can change the header color and make the body gray but I wanted to make the pages animated like that: http://iiro.eu/index.html — Davi, Jan 14 '12 at 18:27
Unfortunately the guy in the example has it easier than you do thanks to his side by side layout. However, here is an answer I gave the other day to someone with a similar question to this one (no slide effect I'm afraid but I would think it is still perfectly possible): http://stackoverflow.com/a/8825714/681807 — My Head Hurts, Jan 14 '12 at 18:36
I tried what you said, but it ended up like this: http://cl.ly/2R3r2A0o2i1Y3m092m0P Any ideas? — Davi, Jan 14 '12 at 19:22
You need to assign the colour of the `#content` to the `body` tag. [Here is a JSFiddle](http://jsfiddle.net/AqJp2/), I have changed your HTML slightly to make it a little more semantic. Let me know if you have any questions about it. — My Head Hurts, Jan 15 '12 at 13:33
It worked, thanks a lot! One more question, how this "overflow: hidden" works? — Davi, Jan 15 '12 at 14:12
No problem - if you want me to add it as answer to this question then let me know, otherwise just stick an upvote on the answer I linked you too. The `overflow: hidden` is a way of clearing the floats from child elements. — My Head Hurts, Jan 15 '12 at 16:41
I can't vote up because I don't have enough reputation, feel free to post an answer ;) — Davi, Jan 15 '12 at 17:44

score 4 · Accepted Answer · edited May 23 '17 at 11:44

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/

Not that it would make a huge difference, but you mixed up your two links. Nice answer though. — Aiyion.Prime, Nov 23 '15 at 14:54

score 0 · Answer 2 · edited Jan 21 '13 at 16:58

0

Yea. Lose the min-height property.

edited Jan 21 '13 at 16:58

xpda

15,585
8
51
82

answered Jan 14 '12 at 17:07

mihai

37,072
9
60
86

But if I do this the content area will not fill the rest of the page. – Davi Jan 14 '12 at 17:17

score 0 · Answer 3 · edited May 23 '17 at 11:52

0

Look here:

Make a div fill the height of the remaining screen space

This really isn't all that possible using normal CSS and HTML.

If all you want is for the background to be that lighter gray, I would suggest that you make the background of the body be that color and then make the header and nav be the darker grey. The content will look like it fills the rest, but won't actually.

Edit:

Sorry, I should say not possible using a div and the body element. With a table you can achieve something like what you are going for.

edited May 23 '17 at 11:52

Community

1
1

answered Jan 14 '12 at 17:29

SimpleTouch

158
5

I though about inverting the colors, but I wanted to make the content part animated so it needed to be the one with the shadow. It would be a bad idea to use a table? – Davi Jan 14 '12 at 17:47
@SimpleTouch there is no need to bring tables into this. Just because you don't know how to do it using `div` elements does not mean it is not possible. – My Head Hurts Jan 14 '12 at 18:04
Not at all. Tables tend to be looked down upon cause of a bad history of being overused and are more HTML markup than is typically needed for a given task, but if they do the job nothing else can without hacks, I see no reason not to. – SimpleTouch Jan 14 '12 at 18:06
@MyHeadHurts Definitely agreed. I normally avoid tables like the plague. There are a few answers in the SO question I referenced that claim to accomplish this without a table, which should definitely be explored. I'm just not sure how well they will fit with what Davi is trying to do with his layout. – SimpleTouch Jan 14 '12 at 18:17
The table worked perfectly, but I'll test the other solutions, thanks. – Davi Jan 14 '12 at 18:36

score 0 · Answer 4 · answered Jan 14 '12 at 17:29

0

Steve Sanderson has a great treatment of height CSS issues here: http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

answered Jan 14 '12 at 17:29

fordareh

2,923
2
26
39

Interesting, but I don't see how this can help in my case. – Davi Jan 14 '12 at 17:46

CSS - Content with 100% min-height creates a vertical scrollbar

4 Answers4