ansaurus

Question

Answer 1

+1 A:

If you want 2000px of blue beneath the 400px div, make this change:

Change the height of the containing div to be the height of it's contents + the 2000px space.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;">

<head> </head>

<body style="height: 100%;">

  <div style="height: 2400px; overflow: auto; background-color: #00f;">

    <div style="height: 400px; background-color: #f00;">
    </div>

  </div>

</body>

</html>

dylanfm 2009-01-28 02:21:06

Answer 2

A:

Thanks for the reply but I need the margin to show up because the height of red rectangle changes. I just want constant margin beneath... and it get's collapsed but I don't know why. I tried padding:1px, didn't help....

2009-01-28 02:36:40

Answer 3

+1 A:

Remove your height: 100% from <body>:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;">
<head>
</head>
<body>
  <div style="height: 100%; overflow: auto; background-color: #00f;">
    <div style="height: 400px; margin-bottom: 2000px; background-color: #f00;"></div>
  </div>
</body>
</html>

strager 2009-01-28 02:41:29

Answer 4

A:

Get rid of the height declaration in the blue background div.

<?xml version="1.0" encoding="UTF-8"?>    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;">
<head>
</head>
<body style="height: 100%;">
  <div style="background-color: #00f;overflow:auto">
    <div style="height: 400px; margin-bottom: 2000px; background-color: #f00;"></div>
      </div>
</body>
</html>

2009-01-28 02:45:48

Answer 5

A:

It's because you have a height set on the containing div. Margins aren't content, so they don't trigger overflow. You could add another div around the innermost div, and give it a 1px padding, or, as others have suggested, you could adjust your existing containing divs.

Christopher Swasey 2009-01-28 02:49:51

Answer 6

A:

2009-01-28 02:59:24

ansaurus

tags:

views:

answers:

CSS margin-bottom collapsed - but why?

related questions