0

If I have the following structure, for example, in a single page layout:

<div id="container">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</div>

Is it possible to set the minimum height of divs 1-4 to 100%, and position each div one under the other, using CSS alone? Ive created a page where the each div is 100% in height but problems begin to arise when the content of the divs are longer than the browser window. There seem to be a lot of min-height 100% related articles but I haven't found one yet where there is more than one div involved.

David
  • 437
  • 2
  • 10
  • 26
  • Are you trying to show only one div at a time? What are you aiming for? – Timbadu May 07 '12 at 00:02
  • Hi, I am aiming to show each div, one under the other, all at the same time. I think I have it sorted now. – David May 07 '12 at 00:05
  • How did you do it? Was it the Min-Height Fast Hack? {min-height:100%; height:auto !important; height:100%; } – Timbadu May 07 '12 at 00:09

1 Answers1

1

For height or min-height to work correctly on a element, the parent of a element needs to have a explicit height declared. This goes all the way up in your DOM tree.

There shouldn't be a difference for rendering one or multiple div elements with min-height as far as I know, so yes it is possible to do the positioning with CSS alone.

See Percentage Height HTML 5/CSS for more details

Community
  • 1
  • 1
Ben
  • 13,297
  • 4
  • 47
  • 68