UPDATE: The issue was resolved by adding the Doctype at the top of the page - "<!DOCTYPE html>" (no spaces between tags < , > and other characters)
I am experimenting with a webpage that contains four sections. The first section should take up the height of the browser window. To achieve this, I tried using both jQuery and JavaScript code. Interestingly, the JavaScript code works while the jQuery code does not. Here are the codes:
jQuery:
$("section:first").css("min-height", $(window).height());
$(window).resize(function() {
$("section:first").css("min-height", $(window).height());
});
JavaScript:
var first = document.getElementsByTagName("section")[0];
first.style.minHeight = window.innerHeight + "px";
window.onresize = function() {
first.style.minHeight = window.innerHeight + "px";
}
I use an iMac with a resolution of 1920x1080 and my Chrome browser window height is 896px. Strangely, when I use the jQuery code (which does not produce any console errors!), the min-height value increases as I resize the window (always going up) based on the number of other sections. Does anyone know why this happens?
Below is the HTML and CSS code snippet:
body {
margin: 0;
background-image: url("images/bg.jpg");
background-repeat: repeat;
background-position: center;
background-attachment: fixed;
background-size: 713px 518px;
}
.content {
background-color: #FFF;
}
.internal {
position: relative;
padding: 1% 20px;
margin: 0 auto;
border-bottom: 1px solid #21D561;
}
<section> Some content here </section>
<section class="content">
<div class="internal">
<p>Here a big Lorem Ipsum in eight paragraphs</p>
</div>
</section>
<section class="content">
<div class="internal">
<p>Here a big Lorem Ipsum in six paragraphs</p>
</div>
</section>
<section class="content">
<div class="internal">
<p>Here a big Lorem Ipsum in six paragraphs</p>
</div>
</section>
You can view the unexpected outcome here: