Adding height:100%; to elements gives me a scrollbar.

Question

Hello

Here's my html as basic as possible:

<div class="wrapper">
    <div class="left">foo</div>
    <div class="middle">foo</div>
    <div class="right">foo</div>
</div>

And here comes my css:

* { padding: 0; margin: 0; }
html, body { height: 100%; }
.wrapper { min-height: 100%; }
/* left, middle and right have float:left and a width. Also min-height:100%; */

So, I've tried everything. Added min-heigth: 100% to all, taken it away and then put it back. Still a scrollbar appears.

Any ideas?

Martti Laine

Answer 1

Have you tried

overflow:hidden;

Answer 2

Try using:

html, body, .wrapper { 
  overflow-y:hidden;
}

By the way .wrapper should be #wrapper because it is assumed to be only once on a page.