/    Sign up×
Community /Pin to ProfileBookmark

Using JavaScript to extend the height of a DIV to the height of a document or page.

Copy linkTweet thisAlerts:
Dec 11.2010

Hello everyone,

How can I use JavaScript to dynamically re-size a DIV on a page so that the div extends vertically to the size of the page or document.

[B]Example:[/B] As the page gets longer due to contents, the DIV will also extend to the bottom of the page.

I have been experimenting all evening with different methods, some don’t even work.

Thanks everyone!

Novice

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@TcobbDec 11.2010 — This is a very simple solution that assumes that the DIV that you want to expand has no other elements preceding it on the page. If there are you need to incorporate some code that will set their display property to "none"


[CODE]function resizeDiv(id){ //the HTML id of the div is the argument to be passed
var x =document.getElementById(id);
x.style.height = '100%';
}[/CODE]
Copy linkTweet thisAlerts:
@Novice2010authorDec 11.2010 — This is a very simple solution that assumes that the DIV that you want to expand has no other elements preceding it on the page. If there are you need to incorporate some code that will set their display property to "none"


[CODE]function resizeDiv(id){ //the HTML id of the div is the argument to be passed
var x =document.getElementById(id);
x.style.height = '100%';
}[/CODE][/QUOTE]

Maybe I am doing this wrong but it does not work.

Thanks anyway.


Novice
Copy linkTweet thisAlerts:
@TcobbDec 11.2010 — Can you show a skeleton version of your HTML? You never made that clear. The function I gave you does work but it is predicated upon the assumption that the DIV to be expanded will be the first child of document.body
Copy linkTweet thisAlerts:
@Novice2010authorDec 11.2010 — Can you show a skeleton version of your HTML? You never made that clear. The function I gave you does work but it is predicated upon the assumption that the DIV to be expanded will be the first child of document.body[/QUOTE]

Here is a quick example I whipped up.

Basically I need the sideBar to extend vertically as more text is placed in the main content.

The sideBar can actually expand to the height of the mainContent or to the height of the container or wrapper.

Here is a sample code:

[CODE]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#wrapper{
width: 950px;
background-color: #CCC;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

#mainContent{
width: 500px;
background-color: #0C9;
padding: 0px;
margin: 0px;
float: right;
}

#sideBar{
width: 400px;
background-color: #930;
float: left;
}

.clear{ /*Simply forces the container to stretch and contained the contents within it.*/
clear: both;
}

</style>
</head>

<body>
<div id="wrapper">
<div id="mainContent">
<p>Aliquam nec felis. Donec molestie fringilla urna. Duis sollicitudin semper diam. Cras viverra tortor ac purus. Praesent tellus. Etiam velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur id tellus eget turpis nonummy mattis. Vivamus ornare, elit sit amet adipiscing gravida, odio sapien ultrices purus, nec tristique magna lectus ac libero. Aenean dolor magna, convallis a, pharetra in, vulputate ut, tellus. Curabitur a tortor ut enim blandit suscipit. Cras ac magna. Vestibulum nulla. Praesent pellentesque faucibus felis.</p>

<p>Aliquam nec felis. Donec molestie fringilla urna. Duis sollicitudin semper diam. Cras viverra tortor ac purus. Praesent tellus. Etiam velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur id tellus eget turpis nonummy mattis. Vivamus ornare, elit sit amet adipiscing gravida, odio sapien ultrices purus, nec tristique magna lectus ac libero. Aenean dolor magna, convallis a, pharetra in, vulputate ut, tellus. Curabitur a tortor ut enim blandit suscipit. Cras ac magna. Vestibulum nulla. Praesent pellentesque faucibus felis.</p>

<p>Aliquam nec felis. Donec molestie fringilla urna. Duis sollicitudin semper diam. Cras viverra tortor ac purus. Praesent tellus. Etiam velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur id tellus eget turpis nonummy mattis. Vivamus ornare, elit sit amet adipiscing gravida, odio sapien ultrices purus, nec tristique magna lectus ac libero. Aenean dolor magna, convallis a, pharetra in, vulputate ut, tellus. Curabitur a tortor ut enim blandit suscipit. Cras ac magna. Vestibulum nulla. Praesent pellentesque faucibus felis.</p>

<p>Aliquam nec felis. Donec molestie fringilla urna. Duis sollicitudin semper diam. Cras viverra tortor ac purus. Praesent tellus. Etiam velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur id tellus eget turpis nonummy mattis. Vivamus ornare, elit sit amet adipiscing gravida, odio sapien ultrices purus, nec tristique magna lectus ac libero. Aenean dolor magna, convallis a, pharetra in, vulputate ut, tellus. Curabitur a tortor ut enim blandit suscipit. Cras ac magna. Vestibulum nulla. Praesent pellentesque faucibus felis.</p>
</div>

<div id="sideBar">
<p>Aliquam nec felis. Donec molestie fringilla urna. Duis sollicitudin semper diam. Cras viverra tortor ac purus. Praesent tellus. Etiam velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur id tellus eget turpis nonummy mattis. Vivamus ornare, elit sit amet adipiscing gravida, odio sapien ultrices purus, nec tristique magna lectus ac libero. Aenean dolor magna, convallis a, pharetra in, vulputate ut, tellus. Curabitur a tortor ut enim blandit suscipit. Cras ac magna. Vestibulum nulla. Praesent pellentesque faucibus felis.</p>
</div>

<br class="clear" />
</div>
</body>
</html>

[/CODE]
Copy linkTweet thisAlerts:
@TcobbDec 11.2010 — I'm not sure if this is exactly what you had in mind but you might try this from within the head section of your page:

[CODE]<script type="text/javascript">
function initDiv(){
var x = document.getElementById("sideBar");
x.style.height = window.innerHeight + "px";
x.style.position = "fixed";

}

window.onload = function(){initDiv();}
</script>[/CODE]
Copy linkTweet thisAlerts:
@Novice2010authorDec 11.2010 — I'm not sure if this is exactly what you had in mind but you might try this from within the head section of your page:

[CODE]<script type="text/javascript">
function initDiv(){
var x = document.getElementById("sideBar");
x.style.height = window.innerHeight + "px";
x.style.position = "fixed";

}

window.onload = function(){initDiv();}
</script>[/CODE][/QUOTE]

It extends the sideBar but unfortunately, it does not work without the fixed positioning, which causes the Sidebar to "stick" and not scroll with the rest of the page.

It also does not work in IE.

Thanks for all your help and effort.


Novice
×

Success!

Help @Novice2010 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...