CODEWITHSUNDEEP
htmlscrollbarmargin
Ben Fausti
Ben Fausti

Reputation: 1

Margin bottom not working on %100 div

I have the following html code:

<html>
 <body style="margin:0px; padding:0px;">
   <div id="outer" style="height:100%;">
     <div id="header" style="height:40px; background:blue;">Header</div>
     <div id="main" style="height:100%; margin-bottom:-40px; background:red; overflow:auto;">
        <p style="height:1000px">Main</p>
     </div>
   </div>
 </body>
</html>

I only want the vertical scroll to appear on the main div when the content within it exceeds the viewable area, it seems the margin-bottom on the main div is not working.

Can anyone help me with this issue?

Upvotes: 0

Views: 9244

Answers (1)

Sajid
Sajid

Reputation: 4421

You seem to be solving the wrong problem, actually. If you just want to get rid of the scroll bar for the body itself, set body's style to overflow:hidden.

<html>
  <body style="margin:0px; padding:0px;overflow:hidden;">
   <div id="outer" style="height:100%;">
     <div id="header" style="height:40px; background:blue;">Header</div>
     <div id="main" style="height:100%; margin-bottom:-40px; background:red; overflow:auto;">
        <p style="height:1000px">Main</p>
     </div>
   </div>
 </body>
</html>

This should resolve the margin issue, and then all you have to do is keep the sizes right.

Upvotes: 0

Related Questions