AnnaBlabber AnnaBlabber - 9 days ago 4
CSS Question

How do I make an element the height of the browser window?

I've written code to make a section's height (#home) match the window height, but it's bugging out.

Here's what I use:

// Make Home section height of window

function fitHomeToScreen() {
var windowHeight = $(window).innerHeight();
$("#home").css("height", windowHeight);
alert(windowHeight);
}
$(window).load(fitHomeToScreen);
$(window).resize(fitHomeToScreen);


Every time I refresh the browser (no matter what size I drag the browser to), windowHeight stays the same. Then, if I resize the browser window a bit, the windowHeight doubles. Every time. Forever. Like so:

902px [drag browser a few pixels wider] 1804px [drag browser a few pixels wider] 3608 ... etc. ...

Here's all my code:

HTML

<html>
<head>

<link rel="stylesheet" type="text/css" href="style.css">

<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic|Montserrat:700|Merriweather:400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

</head>

<body>

<section id="main-menu">
<a href="#home" class="logo"></a>
<nav>
<ul>
<li><a href="#whatwedo">What we do</a></li>
<li><a href="#howitworks">How it works</a></li>
<li><a href="#team">Team</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</section>

<section id="home">
<div class="content">
<div class="headline">Headline.</div>
<div class="explanation">Blah blah blah.</div>
</div>

</section>

<section id="whatwedo">
<h2>What we do</h2>
<div class="explanation">Some stuff</div>
</section>

<section id="howitworks">
<h2>Lorem ipsum</h2>
<div class="explanation">Some stuff</div>
</section>

<section id="team">
<h2>Lorem ipsum</h2>
<ul class="team">
<li class="modal-trigger" data-modal="name">
<img src="images/name.jpg" alt="Firstname Lastname" />
<div class="name">Firstname Lastname</div>
<div class="title">Title</div>
</li>
<li class="modal-trigger" data-modal="name">
<img src="images/name.jpg" alt="Firstname Lastname" />
<div class="name">Firstname Lastname</div>
<div class="title">Title</div>
</li>
<li class="modal-trigger" data-modal="name">
<img src="images/name.jpg" alt="Firstname Lastname" />
<div class="name">Firstname Lastname</div>
<div class="title">Title</div>
</li>
<li class="modal-trigger" data-modal="name">
<img src="images/name.jpg" alt="Firstname Lastname" />
<div class="name">Firstname Lastname</div>
<div class="title">Title</div>
</li>
<li class="modal-trigger" data-modal="name">
<img src="images/name.jpg" alt="Firstname Lastname" />
<div class="name">Firstname Lastname</div>
<div class="title">Title</div>
</li>
<li class="modal-trigger" data-modal="name">
<img src="images/name.jpg" alt="Firstname Lastname" />
<div class="name">Firstname Lastname</div>
<div class="title">Title</div>
</li>
<li class="modal-trigger" data-modal="name">
<img src="images/name.jpg" alt="Firstname Lastname" />
<div class="name">Firstname Lastname</div>
<div class="title">Title</div>
</li>
</ul>

<!-- Team member modals -->

<div class="modal team-member name">
<img class="x" src="images/x.svg" alt="Close" />
<img src="images/name.jpg" alt="Firstname Lastname" />
<div class="name">Firstname Lastname</div>
<div class="title">Title</div>
<p>Some stuff</p>
</div>



</section>

<section id="contact">
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet</p>
<a class="button" href="mailto:info@company.com">Email us</a>
</section>

<footer>
<div class="info">
<div>Address</div>
<div>Phone number</div>
<div>info@company.com</div>
</div>
<div class="legal">Lorem ipsum</div>
</footer>


<div class="modal-backdrop"></div>

<script type="text/javascript">

// ------ Make modal work

$(".modal-trigger").click(function() {
var modalName = $(this).attr( "data-modal" );
var modal = ".modal." + modalName;
// Center modal
var modalHeight = $(modal).outerHeight();
var modalWidth = $(modal).outerWidth();
$(modal).css({
"margin-top" : (modalHeight/2)*-1,
"margin-left" : (modalWidth/2)*-1,
});

$(modal).fadeIn();
$(".modal-backdrop").fadeIn();
function collapseModal() {
$(modal).fadeOut();
$(".modal-backdrop").fadeOut();
}
$(".modal-backdrop").click(collapseModal);
$(".x").click(collapseModal);
});

// ------ When an anchor link is clicked, smoothly scroll there, and remove the URL hash

$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 600);
return false;
}
}
});
});

// ------ Make Home section at least height of window

function fitHomeToScreen() {
var windowHeight = $(window).innerHeight();
$("#home").css("height", windowHeight);
alert(windowHeight);
}
$(window).load(fitHomeToScreen);
$(window).resize(fitHomeToScreen);

// ------ Vertically center Home section content

function centerHomeContent() {
var homeContentHeight = $("#home .content").outerHeight();
var homeContentWidth = $("#home .content").outerWidth();
$("#home .content").css({
"margin-top" : (homeContentHeight/2)*-1,
"margin-left" : (homeContentWidth/2)*-1,
});
}
$(window).load(centerHomeContent);
$(window).resize(centerHomeContent);


</script>


</body>

</html>


CSS

/**
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

/* End CSS reset */





/* Basic styles */

body {
font-family: Lato;
font-weight: 300;
font-size: 18px;
color: #222;
text-align: center;
}

a {
text-decoration: none;
}

h2 {
font-size: 60px;
}

p {
line-height: 160%;
font-size: 20px;
}

.explanation {
font-size: 28px;
line-height: 160%;
}



/* Modal */

.modal {
display: none;
position: fixed;
top: 50%;
left: 50%;
width: 80%;
height: 80%;
background-color: #fff;
z-index: 99999;
}

.modal-backdrop {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.8);
}

.modal .x {
width: 20px;
height: 20px;
}




/* Section - Main menu */

#main-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: red;
z-index: 9999;
padding: 0 30px;
box-sizing: border-box;
text-align: left;
}

#main-menu a {
color: #fff;
}

#main-menu .logo {
display: inline-block;
width: 336px;
height: 40px;
background-image: url("../images/logo.png");
background-repeat: no-repeat;
margin-top: 10px;
}

#main-menu nav {
float: right;
}

#main-menu nav ul li {
display: inline-block;
margin: 0 0 0 30px;
}

#main-menu nav ul li a {
letter-spacing: .05em;
font-size: 16px;
display: table-cell;
vertical-align: middle;
height: 60px;
-webkit-transition: ease-in-out .15s;
-moz-transition: ease-in-out .15s;
-o-transition: ease-in-out .15s;
transition: ease-in-out .15s;
}

#main-menu nav ul li a:hover {
box-shadow: inset 0 -4px 0 0 white;
}


/* Section - Hero */

#home {
display: block;
position: relative;
width: 100%;
background: black;
color: white;
}

#home .content {
width: 80%;
position: absolute;
top: 50%;
left: 50%;
}

#home .headline {
font-size: 60px;
margin-bottom: 30px;
}

Answer

I played around with it a little more and found that it works best without using jQuery (for finding the window height without it adding to become a ridiculous number).

Change $(window).innerHeight() to window.innerHeight and it will work like you want it too.