5

I'm trying to create a website that has a 'panel div on the left, and 'content' div on the right, both contained within <body>, and I want them to dynamically expand height to the size of the window. The problem is, when I use html,body{height:100%}, there is a scroll bar appearing. I'm hesitant to post full code of what I'm doing, but it is doing this still with a stripped down to:

    <!DOCTYPE HTML>
    <HTML>
      <HEAD>
        <STYLE>
          html, body {height:100%}
        </STYLE>
      <BODY>
      </BODY>
    </HTML>

so I don't think anything I'm doing could be messing with it...

I will try to provide more info upon request.

3
  • 1
    Tell us what your browser is. Aug 27, 2013 at 19:44
  • @LightnessRacesinOrbit Sorry, up-to-date Chrome, and IE7 are the only ones I had access to.
    – Daevin
    Aug 28, 2013 at 1:25
  • 1
    For the record, the OP is using Chrome 29. Aug 28, 2013 at 8:26

3 Answers 3

11

HTML/BODY got standard padding/margin going on

try:

  <!DOCTYPE HTML>
<HTML>
  <HEAD>
    <STYLE>
      html, body {height:100%;
        margin:0;
        padding:0;}
    </STYLE>
  </HEAD>
  <BODY>
  </BODY>
</HTML>
4
  • 1
    It's actually margin.
    – SLaks
    Aug 27, 2013 at 19:19
  • 3
    Also when dealing with values of 0, it is recommended to remove any unit specification (% in this case)
    – Appleshell
    Aug 27, 2013 at 19:21
  • 1
    if you insert only padding:0%; it still works for me thou :) but edited :) Aug 27, 2013 at 19:22
  • 1
    @DennisAnderson Great, thanks so much! I've taught myself some very basic html/CSS/JS, but I don't know the ins and outs... Picked your answer because you described the issue and gave code solution that I can learn from :)
    – Daevin
    Aug 28, 2013 at 1:32
10

<body> has 8 pixels of margin around it by default, which falls outside the 100% height.

You need to remove that.

2

Add the following attributes to your body:

margin: 0px;
padding: 0px;
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.