JavaScript may not display height as anticipated

Question

JavaScript may not display height as anticipated

Currently, I am experimenting with JavaScript in order to achieve a website section that is 100% the height of the screen minus the "nav" bar.

Imagine it as having two visible components - the first one being large and the second one small at the bottom.

The CSS code for this is:

#mainHeader{
     height: 100vh;
}

#nav{
     height 90px;
}

I have implemented this functionality using JavaScript/jQuery and it kicks in during the body's onload event.

<body onload = "function()"> </body>

var mainHeaderHeight = $("#mainHeader").outerHeight(true) - $("nav").outerHeight(true);
$("#mainHeader").css("height",mainHeaderHeight + "px");

This results in the following visual appearance:

javascript jquery html css

Answer 1

Answer №1

To avoid the hassle of using jQuery, you have an alternative option available in CSS3 called calc (especially since you are already utilizing the relatively "modern" vh):

#mainHeader {
    height: calc(100vh - 90px);
}

Answer 2

To avoid the hassle of using jQuery, you have an alternative option available in CSS3 called calc (especially since you are already utilizing the relatively "modern" vh):

#mainHeader {
    height: calc(100vh - 90px);
}

Answer 3

Answer №2

Make sure to target the #nav element in your CSS instead of the nav element.

var mainHeaderHeight = $("#mainHeader").outerHeight(true) - $("#nav").outerHeight(true);
$("#mainHeader").css("height",mainHeaderHeight + "px");

html, body {
  margin: 0;
  padding: 0;
}

#mainHeader{
  height: 100vh;
  margin: 0;
  padding: 0;
}

#nav{
  height 90px;
  margin: 0;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mainHeader">main</div>
<div id="nav">nav</div>

Answer 4

Make sure to target the #nav element in your CSS instead of the nav element.

var mainHeaderHeight = $("#mainHeader").outerHeight(true) - $("#nav").outerHeight(true);
$("#mainHeader").css("height",mainHeaderHeight + "px");

html, body {
  margin: 0;
  padding: 0;
}

#mainHeader{
  height: 100vh;
  margin: 0;
  padding: 0;
}

#nav{
  height 90px;
  margin: 0;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mainHeader">main</div>
<div id="nav">nav</div>

JavaScript may not display height as anticipated

Answer №1

Answer №2

Similar questions

Updating the configuration settings for CKEditor 5 using Reactjs

Experimenting with combining a CSS class alongside the Nth-child selector

Error message: "Reactjs - TypeError: The property 'map' cannot be read as it is undefined in the table"

What is the best way to extract multiple variables from a function in JavaScript?

Display data fetched from concurrent Ajax calls in a React Component

Having Multiple File Inputs [type=file] in one webpage

Creating a vertical navigation menu and displaying its submenu on corresponding pages in a horizontal layout

"Waiting for results with Node.js and Mongo DB is like trying to catch a

CakePHP includes built-in jQuery pagination and sorting functionality

What is the method to retrieve the class name of an element when the div is created as '<div id 'one' class="element one"></div>'?

Access exclusive RSS feeds from Twitter

Navigating into iframe can be tricky when the previous iframe is not properly closed in Selenium Webdriver. Here

Pressing the tab key while using Angular will halt any additional processes from running

Showcasing pictures on ReactJS

Condition has been fulfilled for both ngShow and ngHide

Combining ASP.NET MVC with HTML5 for dynamic web development

Unlock the secret: Using Javascript and Protractor to uncover the elusive "hidden" style attribute

Having Trouble with Jquery UI Date Picker?

Explaining the structure of a nested object within a TypeScript declaration file

The image loads successfully from an AJAX request in CodePen, but fails to load in the local