Положение Div ниже высоты окна

Question

Давайте посмотрим ниже пример

<div>Main Content<br><br>Main Content which fills windows height</div> 
<div id="belowcontent">Content to be show below the windows height</div> 

Я пытался что-то вроде ниже

$("#belowcontent").css("margin-top", $(window).height()); 

Но проблема здесь есть DIV использует высоту от предыдущего DIV, а не топ-браузер. Я тоже попытался установить положение. Не работаю.

P.s: Если его чистый метод CSS, вот преимущество

Answer 1

Абсолютное позиционирование

Вы можете использовать absolute позиционирование с top декларации. В этом случае я установил top на 100vh, чтобы разместить его под экраном.

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    background: lightgray; 
 
} 
 
.main { 
 
    background: cornflowerblue; 
 
} 
 
#belowcontent { 
 
    position: absolute; 
 
    top: 100vh; 
 
    background: tomato; 
 
}

<div class="main">Main Content 
 
    <br> 
 
    <br>Main Content which fills windows height</div> 
 
<div id="belowcontent">Content to be show below the windows height</div>

---

Относительное позиционирование

Если вы не хотите использовать позиционирование, вы можете быть в состоянии использовать (вместо этого) свойство мин высоты на вашем main DIV :

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.main { 
 
    min-height: 100vh; 
 
    background: cornflowerblue; 
 
} 
 
#belowcontent { 
 
    background: tomato; 
 
}

<div class="main">Main Content 
 
    <br> 
 
    <br>Main Content which fills windows height</div> 
 
<div id="belowcontent">Content to be show below the windows height</div>