Search code examples
htmlcsstwitter-bootstrapmenufixed

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

Solution

  • 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