Как разместить div прямо под другим div?

Question

HTML, является:

<div class="first"> 
    This is first div. This is first div 
    </br> 
    </br> 
    </br> 
    </br> 
    </br> 
    end 
</div> 
<div class="second"> 
    Second starts after first</br>When page is scrolled. 
</div> 

CSS часть:

.first { 
    width:100%; 
    height:100%; 
    position:absolute; 
    top:0px; 
    left:0px; 
    background-color:#000; 
    opacity:0.5; 
    color:#fff; 
} 
.second { 
    background-color:#F00; 
    opacity:1; 
    position:absolute; 
    left:0px; 
    width:100%; 
    height:600px; 
} 

Я хочу второй ДИВ быть помещен после того, как первый. Первый <div> займет всю высоту. Вот почему я использовал position: absolute.

Кроме того, я не хочу писать что-то наподобие top:600px; во втором div's CSS, потому что, когда высота окна уменьшается, между двумя divs вводится пробел.

Как заставить его начинать сразу после первого div, независимо от разрешения экрана?

Вот скрипка: http://jsfiddle.net/v8xUL/457/

Answer 1

Если вы хотите, чтобы сделать две дивы появляются в полный рост, а также они должны быть рядом друг с другом, вам необходимо установить height предыдущего DIV (100%) в качестве следующего div top. Вы должны дать top: 100% для своего второго div вместо этого. Проверьте это:

.first { 
 
    width:100%; 
 
    height:100%; 
 
    position:absolute; 
 
    top:0px; 
 
    left:0px; 
 
    background-color:#000; 
 
    opacity:0.5; 
 
    color:#fff; 
 
} 
 
.second { 
 
    background-color:#F00; 
 
    opacity:1; 
 
    position:absolute; 
 
    left:0px; 
 
    width:100%; 
 
    height:600px; 
 
    top: 100%; 
 
}

<div class="first"> 
 
    This is first div. This is first div 
 
    <br /> 
 
    <br /> 
 
    <br /> 
 
    <br /> 
 
    <br /> 
 
    end 
 
</div> 
 
<div class="second"> 
 
    Second starts after first</br>When page is scrolled. 
 
</div>

Answer 2

Снимите position: absolute;

body {margin: 0;} 
 
.first { 
 
    width:100%; 
 
    background-color:#000; 
 
    opacity:0.5; 
 
    color:#fff; 
 
} 
 
.second { 
 
    background-color:#F00; 
 
    opacity:1; 
 
    width:100%; 
 
    height:600px; 
 
}

<div class="first"> 
 
    This is first div. This is first div 
 
    </br> 
 
    </br> 
 
    </br> 
 
    </br> 
 
    </br> 
 
    end 
 
</div> 
 
<div class="second"> 
 
    Second starts after first</br>When page is scrolled. 
 
</div>

Answer 3

Удалить position:absolute;
Fiddle

body{margin:0;} 
 
.first { 
 
    width:100%; 
 
    height:100%; 
 
    background-color:#000; 
 
    opacity:0.5; 
 
    color:#fff; 
 
} 
 
.second { 
 
    background-color:#F00; 
 
    opacity:1; 
 
    position:absolute; 
 
    left:0px; 
 
    width:100%; 
 
    height:600px; 
 
}

<div class="first"> 
 
    This is first div. This is first div 
 
    <br /> 
 
    <br /> 
 
    <br /> 
 
    <br /> 
 
    <br /> 
 
    end 
 
</div> 
 
<div class="second"> 
 
    Second starts after first<br />When page is scrolled. 
 
</div>

И это либо <br> или <br/>