Home/ Questions/Q 8897545
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T00:22:23+00:00

I am using Twitter Bootstrap with a fixed navbar, so I have the following

  • 0

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%?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0