Geek Answers Handbook

Div strength below other and prevent coincidence

I have two div elements. The first should be 100% of the height and width of the screen. I would like the second Div to be 100% wide, but variable in height depending on the content and start inside (below the first). So the full screen is Div 1 and you need to scroll down to see Div 2. But all I tried, they overlap.

<div style="background-color:red;height:100%;width:100%;left:0px;top:0px"></div> <br/> <div style="width:100%;position:relative;background-color:yellow"> <br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>.. </div>

http://jsfiddle.net/FBJ8h/

+6
source share
3 answers

still because

 position:absolute

makes the div unoccupied, which means that other elements do not “see” them when aligned and positioned.

Use this:

 html,body { height:100%; } div.div2 { top:100%; }

Jsfiddle

+9
source

First you must set the html- and body-tag to height: 100%:

 html, body { height:100%; }

And second: you need to change the position of the first div as "relative" and not "absolute" (as in the jsfiddle file):

 position: relative;

Hope this helps ...

EDIT: And delete <br> -Tag between the two divs - if not, there will be a white gap between them ...

+1
source

Use should use "clear: both" ... add the following between div tags

 <style> .clearfix{ clear:both; } </style> <body> <div class="clearfix"></div> <body>
-1
source

More articles:


All Articles