jquery - Position Div below window height -
lets see below example
<div>main content<br><br>main content fills windows height</div> <div id="belowcontent">content show below windows height</div> i tried below
$("#belowcontent").css("margin-top", $(window).height()); but problem here div using height previous div,not browser top.i tried position absolute too.still not working.
p.s: if pure css method , thats advantage
absolute positioning
you use absolute positioning top declaration. in case i've set top 100vh place below screen height.
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 fills windows height</div> <div id="belowcontent">content show below windows height</div> relative positioning
if don't want use positioning, may able use (instead) min-height property on 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 fills windows height</div> <div id="belowcontent">content show below windows height</div>
Comments
Post a Comment