CODEWITHSUNDEEP
htmlcsstwitter-bootstrapmenufixed
Novikov
Novikov

Reputation: 436

fixed menu position with 100% height body

I dont really understand why my example dont work, but something like that with bootstrap works perfectly.

<html style="height: 100%;">
<body style="height: 100%; padding-top: 70px;">   
    <div style="height: 100%; border: red solid;"></div>      
</body>
</html>

http://fiddle.jshell.net/QVmjd/2/

Why my 100% height is more than 100%? Threrfore in http://getbootstrap.com/examples/navbar-fixed-top/, all is ok?

UPD: more simple example with bootstrap http://fiddle.jshell.net/C3vrB/1/

UPD2: Examples became more clear to understand difference

Upvotes: 0

Views: 1029

Answers (3)

Novikov
Novikov

Reputation: 436

all you need to do this:

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

and then your padding will be count as part of 100% height or width

Upvotes: 0

Matt
Matt

Reputation: 448

It's due to the way CSS handles the box model. Check out the W3C or the CSS Tricks rundown.

Essentially, your box's height is set by the height, and any additional styling such as padding, margin and border are applied to the outside of this size, so your element is being extended by the padding-top: 70px; to be 70 pixels higher than 100%;

If you need padding, you can either add padding by percentage:

height: 85%;
padding-top: 15%;

Bringing your box height to the total of 100%, or you could have the outer box a fixed height and add padding to the child elements, which does not effect the box size of the parent.

There is also the option of using the box-sizing property in CSS, which, when set to border-box, will render the padding, borders etc inside of the declared width and height of the box.

Upvotes: 0

ImAtWar
ImAtWar

Reputation: 1143

the padding-top extends or adds 70px

  <body style="height: 100%; padding-top: 70px;">

Upvotes: 2

Related Questions