html5 - How to make the top row of a Bootstrap grid fill the entire screen -
a common, modern design technique responsive websites use screen-height element above-the-fold content wrapper, , have other content available below. here's discussion on technique. here's a demo @ codepen:
#fullscreen { width: 100%; height: 100%; display: table; } #fullscreen .fullscreen-content { display: table-cell; text-align: center; vertical-align: middle; } <div id="fullscreen"> <div class="fullscreen-content"> ... </div> </div> how can make bootstrap 3 row behave in manner?
i'm facing challenge. here's current solution.
.full-ht { height: 100vh; position: relative; } .full-ht-content { position: absolute; top: 0; bottom: 0; width: 100%; margin-left: -15px; padding-left: 15px; } <div class="container-fluid"> <div class="row full-ht"> <div lass="col-xs-12 full-ht"> <div id="page-top-content" class="full-ht-content"> above-the-fold content. </div> </div> </div> <div class="row"> <div class="col-xs-12"> other content. </div> </div> </div>
Comments
Post a Comment