...

View Full Version : How to RESIZE DIV to 100% height of page minus another DIV height



Greatkiwi
03-15-2012, 01:23 AM
Hi, I need to re-size a div to be 100% of the browser but taking into account the height of an existing header div.

Currently it works but it doesn't factor the height of the above header div, and therefore scrolls off the page (the height of the header div)

I need to manipulate ( subtract the height value of the header) in the javascript somehow.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<script type="text/javascript">
function SetHeightOfDiv(){
var theDiv = document.getElementById('content');
theDiv.style.height = BrowserHeight()+"px";
}

function BrowserHeight() {
var theHeight;
if (window.innerHeight) {
theHeight = window.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight) {
theHeight = document.documentElement.clientHeight;
}
else if (document.body) {
theHeight = document.body.clientHeight;
}
return theHeight;
}
</script>
</head>

<body style="height:100%; background-color:blue; margin:0; padding:0; color:#ffffff; font-size:15px; text-align:center; font-family:monospace,arial"
onload="SetHeightOfDiv()">

<div id="wrapper" style="height:100%; width:900px; background-color:yellow; margin-left:auto; margin-right:auto; overflow:hidden">

<div id="header" style="margin-top:0px; height:130px; width:890px; margin-left:5px; background-color:red; position:fixed">
<p>The FIXED HEADER</p>
</div>

<div id="content" style="margin-top:132px; background-color:grey; width:890px; margin-left:5px">
<p>THE BODY - that extends below the browser window (possibly the height of the header)</p></br>
<p>So how do we manipulate the Javascript to 'Subtract' the height of the HEADER?</p></br>

<p style="text-align:left; padding-left:10px">
function SetHeightOfDiv(){ <br>
var theDiv = document.getElementById('content');<br>
theDiv.style.height = BrowserHeight()+"px";<br>
}<br>
</br>
function BrowserHeight() {<br>
var theHeight;<br>
if (window.innerHeight) {<br>
theHeight = window.innerHeight;<br>
}<br>
else if (document.documentElement && document.documentElement.clientHeight) {<br>
theHeight = document.documentElement.clientHeight;<br>
}<br>
else if (document.body) {<br>
theHeight = document.body.clientHeight;<br>
}<br>
return theHeight;<br>
}</p>
</div>

</div> <!--end of wrapper-->
</body>
</html>



Thanks

webdev1958
03-15-2012, 03:42 AM
I would do something like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
html,body{
height: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#header {
height: 50px;
border: 1px solid green;
}
#content{
border: 1px solid red;
}
</style>
<script type="text/javascript">
function setDivHeight(){
contentO.style.height = (document.body.clientHeight - headerO.clientHeight - (2*getBorderWidth(contentO)) - (2*getBorderWidth(headerO)))+'px';
}
function getBorderWidth(elem){
try{
var borderWidth = parseInt(getComputedStyle(elem, '').getPropertyValue('border-top-width'));
} catch(e){
var borderWidth = parseInt(element_reference.currentStyle.borderWidth);
}
return borderWidth
}
window.onload=function(){
contentO = document.getElementById('content');
headerO = document.getElementById('header');
setDivHeight();
}
window.onresize=setDivHeight;
</script>
</head>
<body>
<div id="header">Header bar</div>
<div id="content">Content container</div>
</body>
</html>But I don't see why you want to resize the div like this. What happens if the user resizes their window to a small size such that the content no longer fits in the div?

Also, note that clientHeight does not take any margins into account so if you have any, you will need to cater for them similarly to how I accounetd for the border in the css, which clientHeight also does not take into account. You could try offsetHeight but in my experience it doesn't always do what its supposed to do.

Greatkiwi
03-15-2012, 06:29 AM
But I don't see why you want to resize the div like this. What happens if the user resizes their window to a small size such that the content no longer fits in the div?

Also, note that clientHeight does not take any margins into account so if you have any, you will need to cater for them similarly to how I accounetd for the border in the css, which clientHeight also does not take into account. You could try offsetHeight but in my experience it doesn't always do what its supposed to do.

This is for an existing social networking site with dynamic content, and the structure of the div's has to be as mentioned above. (I assume the doc type needs to be the same also).

The purpose is mainly for aesthetics by creating a "Content div" within a "wrapper" that stretches 100% of the viewport - as the wrapper does also.

This way I can specify nice background colors for the wrapper that gives a border effect around the content div, and so the content div wont 'pull up' exposing the wrapper background color below it if there is no user content.

The content then sits below the "fixed" header.. so that if the user viewport becomes full then Scrollbar-Y appears and it scrolls up under the header.

The site does all this already - except for stretching the content div to the bottom.

So the structure must still maintain this:



<body>
<div id="wrapper">
<div id="header">Header bar</div>
<div id="content">Content container</div>
</div>
</body>


I tried your code and modified the html but couldn't get the scroll to appear if the content became full or browser minimised etc. Apologies I know little about js sorry. Thanks for your input so far.

webdev1958
03-15-2012, 06:56 AM
It's only a couple of minor tweaks:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
html,body,#wrapper{
height: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#header {
height: 50px;
border: 1px solid green;
}
#content{
border: 1px solid red;
overflow: auto;
}
</style>
<script type="text/javascript">
function setDivHeight(){
contentO.style.height = (wrapperO.clientHeight - headerO.clientHeight - (2*getBorderWidth(contentO)) - (2*getBorderWidth(headerO)))+'px';
}
function getBorderWidth(elem){
try{
var borderWidth = parseInt(getComputedStyle(elem, '').getPropertyValue('border-top-width'));
} catch(e){
var borderWidth = parseInt(elem.currentStyle.borderWidth);
}
return borderWidth
}
window.onload=function(){
wrapperO = document.getElementById('wrapper');
contentO = document.getElementById('content');
headerO = document.getElementById('header');
setDivHeight();
}
window.onresize=setDivHeight;
</script>
</head>
<body>
<div id="wrapper">
<div id="header">Header bar</div>
<div id="content">
Lorem ipsum dolor sit amet, tellus et. Molestie auctor nisl faucibus ut, lorem tortor mattis, fusce nullam enim fringilla vel.
Mauris vitae gravida dolor praesent. Id in nascetur aut odio, nam et. Pede libero bibendum sit felis pretium sodales, fusce
pharetra vestibulum bibendum morbi ultricies nullam, est nulla, id amet mollis. Nec consectetuer urna dapibus luctus ut,
ipsum nascetur consequat dapibus dui ac molestie, est nascetur id nec nunc. Mi etiam mauris facilisi sed, nec ut id,
aliquam non, taciti donec ut. Risus integer hymenaeos velit, nisl suspendisse sollicitudin ut, sed tempor sagittis curae dolor,
volutpat massa ut sagittis. Voluptatem a enim, lobortis lectus volutpat, vitae vero diam purus morbi class, tristique donec
ante sed, ac turpis dis dui vestibulum aut.<br /><br />

Tortor sit voluptatem pede sodales turpis hac, vel velit suscipit, luctus bibendum molestie lacinia neque. Porttitor ante
turpis in voluptate vivamus autem, gravida magna amet porta praesent tincidunt at, nam enim sodales ante non, sit nunc
posuere odio libero nibh ac. Amet id dignissim vehicula tempor et eros. Est hendrerit est quis, et viverra est class pede
voluptas libero, sed mauris tincidunt, ultrices praesent. Iaculis vivamus sapien id, lorem ante aliquet, commodo pede imperdiet
congue, dictum integer eget sed orci. Suscipit vitae quis, massa elit faucibus massa, interdum nam pharetra nulla sed, sollicitudin
egestas, magna viverra.<br /><br />

Vitae quis risus enim. Suspendisse a nulla a, vestibulum eros suspendisse. Magna wisi a ad molestie dolor. Quam vel mollis nulla
pharetra. Qui congue inceptos ut vehicula, feugiat ultricies in pellentesque eu, eros aliquid vel nec dis, risus quis feugiat
vestibulum praesent at. Ut nam aenean eu, etiam nonummy etiam tortor, arcu augue urna proident donec mattis praesent, vel commodo
nulla habitasse sapien ullamcorper condimentum. Ipsum nunc leo dictum magna molestie enim, lacus est, ante habitasse scelerisque
dolor leo sodales erat, tristique dapibus nulla vehicula elementum mauris velit, felis a est. Eget sit erat eget arcu donec,
montes varius. Volutpat nisl ligula in. Suspendisse nullam dictum suspendisse, ante quam tortor at sed eu. Condimentum pulvinar
vestibulum condimentum mattis, vehicula vivamus eget enim in, integer penatibus lobortis eu, wisi sit augue libero eget erat magnis,
velit lacus nascetur rutrum sed ac. Sem rutrum vitae sollicitudin, mauris mauris sit wisi.<br /><br />

Et elit nunc, aliquam rhoncus, cras ante est ac consequat, vitae lacinia curabitur pellentesque ipsum bibendum gravida. Arcu in nisl.
Vivamus etiam viverra morbi nunc, neque cras ut placerat id pulvinar eget, dolor vel pede nunc duis. Amet mi egestas porta, leo est
nec et, suscipit sed ipsum mauris vitae. Libero vulputate massa perspiciatis laborum ipsum, leo parturient dapibus accumsan, nec
viverra luctus a. Qui sit lorem scelerisque purus lectus, aptent habitant nunc turpis duis, malesuada a nam mi litora. Duis sapien
felis, eu aute quis, elit dignissim hymenaeos vel.
</div>
</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum