100% Body Height w/ Twitter Bootstrap & Fixed Navbar
Question
I am using Twitter Bootstrap with a fixed navbar, so I have the following HAML & CSS:
HAML
%html
%body
%header
.navbar
...
#main-wrapper
.container
%footer
CSS
body {
padding-top: 60px
height: 100%;
}
The issue is that this create a body 60px larger than the page height, so I always have a scroll bar on the pages, even when it's not needed to display the content. I NEED the 60px of padding though in order for the responsive behavior to work correctly.
Is there any way to keep this padding and still achieve a body height of exactly 100%?
1 answers
solution1
1 ACCPTED 2012-11-13 11:47:59
You can try something like this:
<body>
<div style='height: 100%; background:blue;'>
<div style='height: 60px; background:red;'>
</div>
</div>
</body>
Let the enclosing div have a height of 100%, and add some internal element to create the padding.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.