[SOLVED] stretch to remaining

[jaymc]

I have 3 divs

 

the top and bottom div are statically set to height:100px

 

I want the middle one to stretch the the remaining space

 

So, if the available screensize was 800, the middle div would stretch to 600px

 

Currently, if I set it to height:100%, it stretches 800px

[ToonMariner]

give it margin: 100px 0; (or margin: 100px auto; - which ever fits the bill).

[jaymc]

That doesnt do anything?

[phpQuestioner]

try this:

 

<div id="header" style="height:100px;width:100%;background:tan;display:block;border:solid 1px black">

</div>
<div id="main_content" style="width:100%;background:oldlace;display:block;height:100%;border:solid 1px black;border-top:solid 0px transparent">

</div>
<div id="footer" style="height:100px;width:100%;background:tan;display:block;border:solid 1px black;border-top:solid 0px transparent">

</div>

[ToonMariner]

div

{

position: absolute;

top: 100px;

bootom: 100px;

}

 

Body should have position relative but as your other divs are already placed it looks like you have that in place.

[bronzemonkey]

Post your code please

[jaymc]

[code][quote author=phpQuestioner link=topic=167762.msg740156#msg740156 date=1195178741]
try this:

[code]
<div id="header" style="height:100px;width:100%;background:tan;display:block;border:solid 1px black">

</div>
<div id="main_content" style="width:100%;background:oldlace;display:block;height:100%;border:solid 1px black;border-top:solid 0px transparent">

</div>
<div id="footer" style="height:100px;width:100%;background:tan;display:block;border:solid 1px black;border-top:solid 0px transparent">

</div>

Didnt work. Paste that into a htm file and open it, doesnt work

 

 

 

My code

 

<td class="rightwrap" valign=top>


<div class="links">
		<div id="loading"></div>
		<div id="timetaken">Livechat latency: 0.00</div>
		<div id="response"></div>
</div>


<div class="profile">
<img src=picture.gif>
</div>


<div id="colours"><? include("inc/colours.inc"); ?>
<BR>

<form name=sound>
<img src="images/sound.gif" style="float:left" title="Message alert sound"> <select style="float:right;" name=sounds OnChange="document.getElementById('message').focus();setsound('<? echo "$User_Session', '$to')"; ?>">
<? echo $sound; include("inc/sounds.inc"); ?>

<form name="uploadform" action="mainphp/upload.php?gender=<?echo $data[gender]; ?>&to=<?echo $to; ?>" method="post" enctype="multipart/form-data" target="iframe">



<img src="images/file.gif" title="Browse for a file and click send" style="float:left"> <input type="file" style="float:right;" name="file" id="filer" class="file" title="Browse for a file and click send">

<span id="filemess" style="padding-top:5px;"></span><input type="submit" class="send" id="send" value="Send a file" title="Browse for a file and click send" OnClick="if (document.uploadform.file.value == '') {alert('You must browse for a file first before you send it'); document.getElementById('message').focus(); return false;}else{upload();}">
</form>


</div>

<div class="smilesfaces"><? include("inc/smiles.inc"); ?></div>
</td>

 

 

Sorry about all the irrelivent code in there, but Im sure its still readable

 

 

Basically, the entire thing is nested in between a <td> which has a height 0f 100%

 

Inside the <td>, there are 3 main divs. the top 2 are set to 100px in the css, the 3rd is set to 100%

 

If you cant decipher my code, if someone can post an example like my quoted posted about with 3 divs, 2 set to 100px and the other to 100%, I can take it from there

 

I just cant get it working [/code][/code]

[phpQuestioner]

the code I provided you will work: it was tested in FireFox v2.0.0.4, IE6, and IE7. Each browser resulted in the middle div stretching from top to bottom of page with 100% fluidness. I only test in the three most commonly used browsers, but it works in all of them.

 

 

You might want to:

 

Paste that into a htm file and open it.

 

and you will see for yourself that it does work.

[phpQuestioner]

since your using tables, any way, in your code; you could also do something like this:

 

<table cellpadding=0 cellspacing=0 height=100% width=100% style="border:solid 1px black"><td height=100px>
<div id="header" style="height:100px;width:100%;background:tan;display:block">

</div>
</td><tr><td style="height:100%">
<div id="main_content" style="width:100%;background:oldlace;display:block;height:100%;border-top:solid 1px black">

</div>
</td></tr>
<tr><td style="height:100px">
<div id="footer" style="height:100px;width:100%;background:tan;display:block;border-top:solid 1px black">

</div>
</td></tr>
</table>

 

this has also been tested and it works too...........

[jaymc]

Ok, it works, but, after re designing my skeleton structure it broke again! I know what the issue is now. Its how firefox deals with overflow:auto property and height:100%

 

Here is the code, exactly what I want with the overflow in place

 

in IE, it works fine, in firefox, the overflow has no purpose

 

Save and open this in both browsers, you will see what I mean. It only works fine in forefox if I assign a static height rather than a %, I however, cant have it this way

 

<table cellpadding=0 cellspacing=0 height=100% width=100% style="border:solid 1px black">


<tr><td style="height:100%; width:100%"><div id="main_content" style="background:oldlace;background:red;display:block;height:100%;width:100%;"></div></td>


<td height="100%" width="150"><div id="header" style="height:100%;width:150px;overflow:auto;background:tan;display:block">
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>
sfsdf<BR>

</div></td>
</tr>


<tr><td style="height:50px" colspan=2><div id="footer" style="height:50px;width:100%;background:tan;display:block;border-top:solid 1px black"></div></td></tr>




</table>

 

Feedback would be great

[phpQuestioner]

you could try to set a max-height for your div - but you probably will have to set a fixed height for that or you could use a little bit of javascript to do some math and set the script to change to max-height based on screen.height of browser.

 

another option would be to add an iframe and set it to 100% and forget about the div all together.

[phpQuestioner]

here is a work around that I created for your situation:

 

<script language="javascript">

// FireFox Overflow Hack

function ffoih()
{
if (screen.height == "600")
  {
   document.getElementById("sidebar").style.maxHeight="289px";
  }

  // Then Continue To Check For Common Screen Heights.
  // You Will Have To Configure Your Max-Height Either Manually (By Testing In Several Common Screen Resolutions).
  // You Could Also Do This By Creating A JavaScript Math Function To Automatically Accomplish This For You.
  // This Can Be Tedious, But It Is A Work Around To Accomplish What You Want To Do.
}

window.onload=function() {
ffoih();
}

</script>

</head><body>

<table width=100% height=100% style="border:solid 1px black" cellpadding=0 cellspacing=0>

<td height=100% width=80% style="background:red">
 
</td>

<td height=100% width=20% valign=top>
<div id="sidebar" style="overflow:auto;width:auto;height:100%;background:tan;border-left:solid 1px black">
sfsdf<br>
sfsdf<br>
sfsdf<br>
sfsdf<br>
sfsdf<br>
sfsdf<br>
sfsdf<br>
sfsdf<br>
sfsdf<br>
sfsdf<br>
sfsdf<br>
sfsdf<br>
sfsdf<br>
sfsdf<br>
sfsdf<br>
sfsdf<br>
sfsdf<br>
sfsdf<br>
sfsdf<br>
sfsdf<br>
sfsdf<br>
sfsdf<br>
sfsdf<br>
sfsdf<br>
sfsdf<br>
sfsdf<br>
sfsdf<br>
sfsdf<br>
sfsdf<br>
sfsdf<br>
sfsdf<br>
sfsdf<br>
sfsdf<br>
sfsdf<br>
sfsdf<br>
sfsdf<br>
sfsdf<br>

</div>
</td>

<tr>

<td colspan="2" width=100% height=100px style="background:tan;border-top:solid 1px black"> 
 
</td>

</tr>

</table>

[jaymc]

Thanks for help guys, I was actually getting read to go with browser height detect but I thought it was getting rather messy

 

I've went for the iframe option, tried to avoid it but its simple and compatible enough

 

Cheers!