I have an element as follows
<div id="loadNavigation" style="width:20%"></div>
<div id="loadContent" style="width:80%"></div>
Essentially navigation is on the left, content on the right.
Now I am dynamically resizing both loadContent
and loadNavigation
on page load to be at a minimum height of the browsers window height. Though at points more likely then not one of the div's will exceed the other in length if it exceeds window height. To prevent this from happening as an example I want to increase loadNavigation
to the same size as loadContent
by getting the height value of loadContent
.
So far I have tried:
function resizeAppWindow() {
var windowHeight = getWindowHeight();
var contentElement = document.getElementById("content");
var contentHeight = (windowHeight - 25);
contentElement.style.minHeight = contentHeight + "px";
var currentContentHeight = contentElement.style.height;
var navigationElement = document.getElementById("navigation");
var differenceInHeight = currentContentHeight - windowHeight;
var navigationHeight = (windowHeight + differenceInHeight);
navigationElement.style.minHeight = navigationHeight + "px";
}
But currentContentHeight
will return null. I beleive this is because the element has a style="min-height:00px;"
but not an actual defined height?
Any pointers in the right direction would be appreciated.
Using clientHeight The clientHeight is a property which returns the height of the element in pixels. clientHeight − it includes the element's padding, but not its border, margin or horizontal scrollbar (if present). It can also include the height of pseudo-elements such as ::before or ::after.
The offsetHeight property returns the viewable height of an element (in pixels), including padding, border and scrollbar, but not the margin. The offsetHeight property id read-only.
height() It returns the current height of the element. It does not include the padding, border or margin. It always returns a unit-less pixel value. Note: The height() will always return the content height, regardless of the value of CSS box-sizing property.
To get the height and width of an HTML element, you can use the offsetHeight and offsetWidth properties. These properties return the viewable height and width of an element in pixels, including border, padding, and scrollbar, but not the margin.
Try offsetHeight:
var currentContentHeight = contentElement.offsetHeight;
Take a look at this page for more height/width properties and how they handle across browsers - quirksmode.org
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With