CODEWITHSUNDEEP
htmlcss
Biker John
Biker John

Reputation: 2711

Header causing unnecessary scrollbar.

I have two main div. One is #header for menu, and one is #container for the content. I want that #container to reach the bottom of the page, whether is filled with content or not. The problem is that adding height:100%; to body, html and #container causes the additional white space and scrollbar, which i do not want when not necessary.

HTML:

<div id='header'></div>
<div id='container'></div>

CSS:

body{

    margin:0;
}

body,html {height:100%;}

#header {

    height:70px;
    width:100%;
    background-color:red;
}

#container {

    width:600px;
    background-color:gray;
    height:100%;
    margin:0 auto;
}

JSFIDDLE: http://jsfiddle.net/ymBnw/

Upvotes: 1

Views: 1314

Answers (7)

emerson.marini
emerson.marini

Reputation: 9348

If you play with the padding and the margin of the #container, and position the #header absolutely, you can achieve this. I'm not taking into consideration the width, which you can set as you like.

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

#header {    
    position: absolute;
    top: 0;    
    width: 100%;
    height: 70px;
    background-color: red;
    z-index: 10;
}

#container {    
    width: 600px;
    height: 100%;
    background-color: gray;
    margin: -70px auto -70px auto;
    padding-top: 70px;
}

#content
{
    padding-top: 70px;
}

Working example: http://jsfiddle.net/ymBnw/15/

EDIT

I've made a mistake setting the padding, which needs to be (obviously) the double of the margin (140px instead of 70px). Code fixed.

EDIT 2

Not happy again. The previous edit made the scrollbars to come back. The new solution proposed adds a new div within the #container.

Upvotes: 1

Ignavia
Ignavia

Reputation: 166

Using the new flexbox layout, all you have to do is to add these CSS properties to the body.

body {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

This sets the layout to flexbox and specifies that the direct children of the body element should be aligned top to bottom. For a more thorough guide to flexbox, have a look at this tutorial. Note that the flexbox layout is currently a candidate recommendation and older browsers are not going to support it. Current Webkit based browsers still need the -webkit vendor prefix.

Upvotes: 0

Hashem Qolami
Hashem Qolami

Reputation: 99464

You should use min-height: 100% instead of height: 100% to fix the background-color issue.

Here is a working solution:

CSS

#header {
    height:70px;
    width:100%;
    background-color:red;
    position: relative;
    z-index: 10;
}

#container {
    width:600px;
    background-color:gray;
    min-height: 100%;
    margin:0 auto;
    margin-top: -70px;
    padding-top: 70px;

    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

JSFiddle Demo #1

JSFiddle Demo #2

As an alternative solution, instead of box-sizing, you can use ::before pseudo-element as the following:

#container {
    width:600px;
    background-color:gray;
    min-height: 100%;
    margin:0 auto;
    margin-top: -70px;
}

#container:before {
    content: ' ';
    display: block;
    height: 70px;
}

JSFiddle Demo #3

Upvotes: 1

Arun Kumar
Arun Kumar

Reputation: 1667

try this

#container {

width:100%;
background-color:gray;
height:100%;
margin:0 auto;
}



#header {
height:70px;
width:100%;
background-color:red;
position:absolute;
}

demo

Upvotes: 0

shennan
shennan

Reputation: 11656

You're specifying the height of the container to be 100% but you're then setting the header height to be 70px. This will ultimately lead to your full body being 100% of the browser window + 70px.

That's why you will be getting a scrollbar, because 100% + 70px results in overflow.

Edit:

As others have suggested, you could use an absolutely positioned header, with a padded container. You would obviously lose flow in this scenario though. When it comes to specifying heights in HTML, there are always trade-offs...

Upvotes: 0

miguelcaires
miguelcaires

Reputation: 684

You could do a position:absolute on the container div.

Code:

#container {
    width:600px;
    background-color:gray;
    margin:auto;
    bottom:0;
    top:70px;
    position: absolute;
    left:50%;
    margin-left:-300px;
}

Demo

Upvotes: 1

CaribouCode
CaribouCode

Reputation: 14398

Yes it would do that. Because you've given the #container 100% height, that is relative to the body. So you've given the #container the same height as the body. On top of that, you've got the #header height. So your total content is now 100% + 70px (header).

The way around this would be to set no height on the #container and have the grey background colour on the body.

You could also try:

#container {
  position: relative;
  z-index: 0;
  top: -70px;
  padding-top: 70px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box; }

#header { 
  position: relative;
  z-index: 10; }

Or you could try:

  #container {
      margin-top: -70px;
      padding-top: 70px;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box; }

I'm not a fan of the second method. You could also do this with absolute positioning and a 70px padding on the top of the container.

Upvotes: 1

Related Questions