CODEWITHSUNDEEP
javascripthtmlcss
John M
John M

Reputation: 81

How to set body height with JavaScript?

document.body.height = document.getElementById("page-main").clientHeight + 400;
#page-main {
    position:absolute;
    width:100%;
    height:2000px;
    z-index:2;
    background:#eeeeee;
}

#footer {
    position:fixed;
    width:100%:
    bottom:0px;
    height:400px;
    z-index:1;
    background:#aaaaaa;
}
<body>

<div id='page-main'>main</div>

<div id='footer'>footer</div>

</body>

I have a footer div with position: fixed; bottom: 0px; and a main content div with position: absolute;.

Basically the idea is to have the main content div act like a sheet of paper on top of the static background of the document, so you would scroll through the content of the page and when you get to the bottom you would need to be able to scroll a couple hundred more pixels to reveal the footer div below the main content div.

I allowed this in my landing page by finding out the height of the body necessary to facilitate this extra space at the bottom and setting the height using height: 1720px; on the body itself. However, I'd like to implement this in a way that it does not need to be constant, as I fear browsers and devices may have different rendered heights for the main content div and I'd like to use this on multiple pages without having to individually hard code the body height.

I tried using JavaScript to find the height of the main content div (using clientHeight, which seems to work perfectly) and add a couple hundred pixels to that number for the height of the body as follows:

document.body.height = document.getElementById("page-main").clientHeight + 400;

and also tried changing the following:

document.body.style.height
document.body.style.paddingBottom

This does not change the height of the body at all. I tried using a similar approach to change the body's background to red, which works, but for some reason it just refuses to change the height specifically. I've tried placing this script in the head, above the body, and at the end of the body. Doesn't help. Finding the clientHeight of the main content div works fine, adding 400 to that number seems easy enough, and I know the document definitely has a body, so I'm very confused as to why it could possibly be that JavaScript refuses to change the height of the body.

I've checked the console in Edge and Chrome and it seems there's no issue, so I'm completely lost here. Normally I can find answers online and I've never had to ask for help but at this point I feel like it's such a simple question and I have no idea why it won't work.

Sorry if this question is't written well, but does anybody have an idea of why JavaScript might not be allowing the changing of the height of the body?

TL;DR:

Upvotes: 6

Views: 22421

Answers (3)

Elmir Avacelilov
Elmir Avacelilov

Reputation: 1

document.body.height = document.getElementById("page-main").clientHeight + 400;
#page-main {
    position:absolute;
    width:100%;
    height:2000px;
    z-index:2;
    background:#eeeeee;
}

#footer {
    position:fixed;
    width:100%:
    bottom:0px;
    height:400px;
    z-index:1;
    background:#aaaaaa;
}
<body>

<div id='page-main'>main</div>

<div id='footer'>footer</div>

</body>

emphasized text

Upvotes: 0

Gerry
Gerry

Reputation: 409

Try it like this:

document.body.style.height = document.getElementById("page-main").clientHeight + 400 + 'px';

You have to specify the units to get a proper result. Like you would do in CSS.

Upvotes: 8

Dhruv Murarka
Dhruv Murarka

Reputation: 386

Setting the height of the body element, the way you want in your question, is complicated by it's relationship with html element and their default CSS (like position: static on body), and by the overflow property. Read more here.

From my experiments on the chrome console, you can't set body height via document.body.clientHeight, it seems to be read-only. You'll need to set height (and possibly overflow) properties in CSS (via document.body.style for javascript).

However, I think the best solution for the effect you want doesn't involve setting body (or html) properties at all. Try this:

  1. Let the footer element by default have CSS: display: none

  2. Detect when user has scrolled to the bottom of the page (using jQuery or scrollTop) or bottom minus some offset

  3. Change the footer's CSS to display: block (by toggling classes preferably, or editing the style property). This will automatically increase the body's scrollbar to accommodate the footer.

  4. When user scrolls back up beyond the footer (or point 2 is false), you set it's CSS to display: none again.

With the above approach, there is no need to hard code or know before hand the height of your footer and non-footer content. You don't need to mess with html or body element CSS. You can also apply CSS animations if you want!

Upvotes: 1

Related Questions