I've coded a solution to ensure that the height of a section (#home) matches the height of the window, but it's causing issues.
Here is the code snippet I used:
// Adjust Home section height based on window height
function fitHomeToScreen() {
var windowHeight = $(window).innerHeight();
$("#home").css("height", windowHeight);
alert(windowHeight);
}
$(window).load(fitHomeToScreen);
$(window).resize(fitHomeToScreen);
Every time I refresh the browser (regardless of the window size), the windowHeight remains the same. However, if I resize the browser slightly, the windowHeight doubles. This continues indefinitely. Here is an example:
902px [drag browser wider] 1804px [drag browser wider] 3608 ... and so on ...
Below is my complete 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>
... More sections follow ...
</body>
</html>
CSS
/* CSS styles here */