How to make a div cover the full screen on load
Question
I'm trying to figure out how to make my initial landing area stretch to fit the full viewport of the browser when the website loads (regardless of browser size). Directly below the fold, should then be my content.
I've tried a few different methods (setting html&body to 100% then have the div I want to fit the screen inherit it, setting height to vh, but nothing quite works). I'm also not sure what is the best practice to do this.
I'll post my code below — hoping to find out what i'm doing wrong, what my options are, and what the best practice is.
Sorry if the code is a little long, I'm also using bootstrap3 & sass.
html body { font-family: 'Lato', sans-serif; background-color: #ABB7B7; height: 100%; width: 100%; margin: 0; padding: 0; } html body .landing-page-wrapper { background-color: #ABB7B7; height: 100%; min-height: 100%; } html body .landing-page-wrapper .header-and-main-nav { padding-top: 36px; } html body .landing-page-wrapper .header-and-main-nav .company-name { color: #374A67; font-size: 18px; font-family: pier-regular; } html body .landing-page-wrapper .header-and-main-nav .logo-container { height: 200px; background-color: #374a67; text-align: center; } html body .landing-page-wrapper .header-and-main-nav .logo-container .company-logo { color: #ECF0F1; font-size: 72px; font-family: pier-bold; text-transform: uppercase; padding-top: 45px; } html body .landing-page-wrapper .header-and-main-nav .nav-ul { list-style: none; text-align: right; } html body .landing-page-wrapper .header-and-main-nav .nav-ul .nav-a { text-decoration: none; color: #374A67; font-size: 16px; font-family: pier-regular; } html body .landing-page-wrapper .quote-board .quote-first-half { font-family: pier-regular; font-size: 56px; color: #ECF0F1; padding-top: 75px; } html body .landing-page-wrapper .quote-board .quote-second-half { font-family: pier-bold; font-size: 48px; color: #ECF0F1; } html body .landing-page-wrapper .test { background-color: rgba(252, 252, 98, 0.75); height: 299px; width: auto; margin-top: 55px; } html body .landing-page-wrapper .test .intro-copy-one { font-family: pier-regular; color: #374A67; text-align: right; font-size: 28px; line-height: 48px; padding-top: 50px; padding-right: 20px; padding-left: 20px; } html body .landing-page-wrapper .test .intro-copy-two { font-family: pier-regular; color: #374A67; text-align: right; font-size: 24px; line-height: 48px; padding-right: 20px; padding-left: 20px; } html body .landing-page-wrapper .test .intro-copy-three { font-family: pier-regular; color: #374A67; text-align: right; font-size: 24px; line-height: 48px; padding-right: 20px; padding-left: 20px; } html body .solutions-container { height: 200px; background-color: pink; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href="css/app.css"> <link href='https://fonts.googleapis.com/css?family=Lato:400,300,700,900' rel='stylesheet' type='text/css'> </head> <body> <div class="landing-page-wrapper"> <div class="container-fluid header-and-main-nav"> <div class="row"> <div class="col-md-12"> <div class="col-md-3"> <p class="company-name">hogue business valuations</p> </div> <div class="col-md-3 logo-container"> <h1 class="company-logo">hbv</h1> </div> <ul class="nav-ul"> <li class="col-md-2 nav-li"><a href="#" title="solutions" class="nav-a">solutions</a></li> <li class="col-md-2 nav-li"><a href="#" title="about" class="nav-a">about</a></li> <li class="col-md-2 nav-li"><a href="#" title="contact" class="nav-a">contact</a></li> </ul> </div> </div> </div> <div class="container-fluid quote-board"> <div class="row"> <div class="col-md-12"> <h1 class="quote-first-half">your business may be your most valuable asset</h1> </div> </div> <div class="row"> <div class="col-md-12"> <h2 class="quote-second-half">shouldn't you know what it's worth?</h2> </div> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-md-offset-5 col-md-7 test"> <p class="intro-copy-one">For over thirty years Hogue Business Valuations has been </p> <p class="intro-copy-two">providing quality solutions to large and small businesses alike. </p> <p class="intro-copy-three">Look below for one that best suits you. </p> </div> </div> </div> </div> <div class="container-fluid solutions-container"> <div class="row"> <div class="col-md-12"> </div> </div> </div> </body> </html>
3 answers
solution1
3 2016-02-22 16:08:04
Use a height of 100vh (viewport-height) and a width of 100vw (viewport-width) for this on your div. Make sure that your div is positioned relatively and has a zero-margin (top and left).
solution2
1 ACCPTED 2016-02-22 15:56:13
you can use Jquery to set the particular div according to the size of the viewport
$(document).ready(function(){
resizeDiv();
});
window.onresize = function(event) {
resizeDiv();
}
function resizeDiv() {
vpw = $(window).width();
vph = $(window).height();
$('#somediv').css({'height': vph + 'px'});
}
solution3
1 2016-02-22 17:00:19
As someone else was suggesting, I would use 100vh to set the height of your element. But as you have the navigation above the fullscreen element you'll need to take in account that it pushes your element down a bit. Use calc() to solve this by subtracting the navigation height from the viewport height.
See quick example here:
body{ margin: 0; text-align: center; } nav{ height: 50px; background-color: black; line-height: 50px; color: white; } section{ height: calc(100vh - 50px); background-color: orange; line-height: 100vh; }
<nav>Navigation</nav> <section class="aboveFold"> Above the fold </section> Everything that goes Beneath the fold here...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.