Jump to content

[SOLVED] stretch to remaining


jaymc

Recommended Posts

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

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

[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]

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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...........

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.