CODEWITHSUNDEEP
htmlcss
gaurav jain
gaurav jain

Reputation: 1345

Vertical/Height scrollbar appears when adding margin-top

My HTML:

div.container

My CSS:

html, body {
  height: 100%;
  background-color: red;
  padding-left: 0px;
  padding-right: 0px;
}    
.container {
  height: 100%;
  background-color: blue;
  margin-top: 5px;
  *zoom: 1;
}

I want to use height=100% and DO NOT want to use overflow=hidden.

Which CSS properties I should use above so that I can have EFFECT OF margin-top for container div above which will not create vertical scroll-bar.

Just Imagine:

* Body with color red
* A div container in body and I want to see the margin of "x" px on top bewteen body and conatiner
* Color of div container blue
* No scrollbars and No overflow="hidden"

Please help

How can I accomplish this? Please help

Upvotes: 3

Views: 11598

Answers (3)

Eugeny
Eugeny

Reputation: 53

Another solution is in use padding-top insted of margin-top

Upvotes: 4

barro32
barro32

Reputation: 2708

Try this CSS

*{
    margin:0;
    padding:0;
}
html, body {
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    height: 100%;
    background-color: red;
    padding-top:5px;
}    
.container {
    height: 100%;
    background-color: blue;
    *zoom: 1;
}

First reset all margin and padding.
box-sizing:border-box; means the size of an element will stay the same no matter how much padding you add to it.

You could also use an absolute positioned div for the red bar.

HTML

<div class="red-bar"></div>
<div class="content"></div>

CSS 

.red-bar{ position:absolute; width:100%; height:5px; top:0; background:red; }
.content{ height:100%; background:blue; }

Upvotes: 5

maksbd19
maksbd19

Reputation: 3830

Since your margin is pushing your div upward and than increasing the total height. In css2 the trick you can do is to wrap your container div in another div and float it either left or right. Because a floated element don't push its parent element in general. And then giving it a width of 100%. Then clearing it. The final code look like...

the markup 

<div class="wrap">
 <div class="container">
  &nbsp;
 </div>
</div>
<div class="clear"></div>

and the style

html, body {
  height: 100%;
  background-color: red;
  padding-left: 0px;
  padding-right: 0px;
  margin:0;
}    
.container {
  height: 50%;
  background-color: blue;
  margin-top: 5px;
  *zoom: 1;
}
.wrap{height:auto;float:left;width:100%;}
.clear{clear:both}

Upvotes: 0

Related Questions