ansaurus

Question

Why does an element styled with "height: 100%" appears to be > 100%?

Answer 1

+8 A:

If that element has vertical padding or margin, it’s added to the height of the block according to the CSS specification (see the visual formatting model for absolutely positioned, non-replaced elements).

Edit The top:45% is moving your element 45% down. Remove it (top:0) or set the element’s height to auto (default value).

Gumbo 2009-05-08 16:08:03

Nope, doesn't work

2009-05-08 16:36:17

Well then we need some code or the page itself to see what’s causing this behavoir.

Gumbo 2009-05-08 16:36:19

Code is posted above

2009-05-08 16:40:39

You're right, the "top:45%" is the cause of the problem. How do I move that DIV down the page so that it's not at the top without causing the same problem as before?

2009-05-08 16:51:23

I figured it out, by removing the height:100% from the #loading DIV makes it work

2009-05-08 16:57:56

Answer 2

A:

Try adding

overflow: hidden;

meep 2009-05-08 16:08:24

That doesn't work because my content is longer than a page long. So by doing overflow:hidden - that makes the scrollbar disappear.

2009-05-08 16:24:28

Answer 3

A:

Absolutely positioned elements are taken out of the flow of the page, so the div probably isn't being fitted behind the content. Why is the container div being absolutely positioned in the first place?

Evan Meagher 2009-05-08 16:09:18

Answer 4

+1 A:

Have you tried:

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

Which should remove all padding and margins from the page as well.

workmad3 2009-05-08 16:09:24

I've set padding/margin to 0 - still same problem

2009-05-08 16:30:00

This is the right answer. The height:100% on the html and body will cause these to fill 100%, which means the div which the body contains can go 100%. With just the margin/padding, it won't work.

larson4 2009-05-08 16:38:25

Answer 5

A:

Ha posted HTML caused an issue without intro text..

<html>
  <head>
  </head>
  <body>
     <div style="height: 100%; background-color: blue;"></div>
  </body>
</html>

Graphain 2009-05-08 16:10:48

Answer 6

A:

Almost always, I start my CSS with the following line:

* {padding:0; margin:0}

This should fix your issue.

jakemcgraw 2009-05-08 16:13:53

I've set the padding/margin to 0 and this does not solve the problem

2009-05-08 16:30:42

Answer 7

A:

Re: // A LOT of content is dynamically loaded via AJAX

Does any of the dynamic data have unbreakable lines, or perhaps images or text that would exceed the space?

Mike Curry 2009-05-08 16:36:44

"images that would exceed the space" - exceed what space? The "content" DIV grows and shrinks based on the amount of content. Much like this web page grows by the more answers that are posted. I'm confused

2009-05-08 16:39:25

Answer 8

A:

Your "loading" div is the full height of the window, and it's positioned 45% from the top, so it overflows the window by 45%, giving you a scroll bar.

Try moving it to the top of the page and centering the text vertically.

tspauld 2009-05-08 16:41:33

ansaurus

tags:

views:

answers:

Why does an element styled with "height: 100%" appears to be > 100%?

related questions