Question

http://designobvio.us/vodka/ Live demo

I’ve set my html, container, main and 100% but nomatter what I do I cannot get the border to be 100% height without scroll bars?

How can I achieve an effect?

HTML

  <div id="main">

  </div>

CSS (not currently the live code but this is what i’ve tried )

html, body{height:100%; width:100%;} 
#main{height:100%; position:absolute; top:0px; bottom:0px; left:0px; right:0px; border:5px solid #000;}

Answer 1

Are you looking for a fixed border or dynamic border? The problem with your code is the W3C box-model. In the default model, padding, margin and border are added to the size of your element. So in your code what you’re really telling it is “make the box 100% and then add 10px worth of border”.

Normally an easy change would be to manually switch the box model, but unfortunately that property does not play nice with height: 100%. So you have a few options:

1) If you are looking for a fixed border, this is a good trick: http://css-tricks.com/body-border/
2) If you need a dynamic border, you need to somehow get around the additional height the border adds. Here is one way:

html,body { height:100%; padding: 0; margin: 0; }
#container {
    min-height:100%;
    border-right: 5px solid #000;
    border-left: 5px solid #000;
    position: relative; /* relative postion so we can absolutely position footer within it */
}
#header {
    height: 100px;
    border-top: 5px solid #000;
    background-color: red;
}
#content { padding: 0 0 100px 0; } /*padding must be equal to the height of the footer*/
#footer {
    height: 100px;
    border-bottom: 5px solid #000;
    background-color: blue;
    position: absolute;
    bottom: 0;
    width: 100%; /* with absolute position, a width must be declared */
} 

HTML

<div id="container">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

jsfiddle here: http://jsfiddle.net/Qw2cb/