Home/ Questions/Q 9275557
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T16:36:57+00:00

I am having Issue in using height . I have used height:100% for a

  • 0

I am having Issue in using height . I have used height:100% for a div in my page. And I set a background color for that. It works fine while the browser is maximised. But when it is resized my div is not rendered properly.

My problem is when I resize the browser window , a scroll appears for my div but the background color is not rendered for my whole div. It is rendered only for what portion I have seen when I resize the window.

My styleclass 

html,body{height:100%;} 
.rightDiv{  height:100%;width: 39%;background: #3F5D91;float: right;color: #F0F0F0;}

Plz help me to get out of this problem.

Thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ve tested this using a local html file:

    <!DOCTYPE html>
<html>
  <head>
    <style>
      html,body{height:100%;} 
      .rightDiv{height:100%;width: 39%;background: #3F5D91;float: right;color: #F0F0F0;}
    </style>
  </head>
  <body>
    <div class="rightDiv">Hello</div>
  </body>
</html>

    and on Firefox 18.0.2/Windows7 I see the div on the right, coloured blue, and I see a scroll bar when full-screen, or resized.

    Scrolling reveals the rest of the div with the background colour intact, so I can’t account for why you see that.

    However, I’m wondering if you actually want to see the scroll bar. Setting an element to 100% usually means you just want it to fill the viewport, not spill over.
    If this is the case, then you need to remove any default margin that the browser applies to elements that contain your div, e.g. the body. Setting:

     html,body{margin:0; height:100%;}

    will make the div fit properly.

    Incidentally, sites like CodePen and JSFiddle offer the option of applying reset style sheets like Normalize and Reset, and you should watch out for these being pre-selected when you create a new pen/fiddle (JSFiddle does this for Normalize).

    • 0