jaymc Posted November 15, 2007 Share Posted November 15, 2007 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 https://forums.phpfreaks.com/topic/77408-solved-stretch-to-remaining/ Share on other sites More sharing options...
ToonMariner Posted November 15, 2007 Share Posted November 15, 2007 give it margin: 100px 0; (or margin: 100px auto; - which ever fits the bill). Link to comment https://forums.phpfreaks.com/topic/77408-solved-stretch-to-remaining/#findComment-392191 Share on other sites More sharing options...
jaymc Posted November 15, 2007 Author Share Posted November 15, 2007 That doesnt do anything? Link to comment https://forums.phpfreaks.com/topic/77408-solved-stretch-to-remaining/#findComment-392248 Share on other sites More sharing options...
phpQuestioner Posted November 16, 2007 Share Posted November 16, 2007 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 https://forums.phpfreaks.com/topic/77408-solved-stretch-to-remaining/#findComment-392596 Share on other sites More sharing options...
ToonMariner Posted November 16, 2007 Share Posted November 16, 2007 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. Link to comment https://forums.phpfreaks.com/topic/77408-solved-stretch-to-remaining/#findComment-392800 Share on other sites More sharing options...
bronzemonkey Posted November 16, 2007 Share Posted November 16, 2007 Post your code please Link to comment https://forums.phpfreaks.com/topic/77408-solved-stretch-to-remaining/#findComment-392813 Share on other sites More sharing options...
jaymc Posted November 16, 2007 Author Share Posted November 16, 2007 [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 https://forums.phpfreaks.com/topic/77408-solved-stretch-to-remaining/#findComment-393068 Share on other sites More sharing options...
phpQuestioner Posted November 16, 2007 Share Posted November 16, 2007 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 https://forums.phpfreaks.com/topic/77408-solved-stretch-to-remaining/#findComment-393091 Share on other sites More sharing options...
phpQuestioner Posted November 16, 2007 Share Posted November 16, 2007 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 https://forums.phpfreaks.com/topic/77408-solved-stretch-to-remaining/#findComment-393101 Share on other sites More sharing options...
jaymc Posted November 17, 2007 Author Share Posted November 17, 2007 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 https://forums.phpfreaks.com/topic/77408-solved-stretch-to-remaining/#findComment-393447 Share on other sites More sharing options...
phpQuestioner Posted November 17, 2007 Share Posted November 17, 2007 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 https://forums.phpfreaks.com/topic/77408-solved-stretch-to-remaining/#findComment-393660 Share on other sites More sharing options...
phpQuestioner Posted November 18, 2007 Share Posted November 18, 2007 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 https://forums.phpfreaks.com/topic/77408-solved-stretch-to-remaining/#findComment-393749 Share on other sites More sharing options...
jaymc Posted November 18, 2007 Author Share Posted November 18, 2007 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 https://forums.phpfreaks.com/topic/77408-solved-stretch-to-remaining/#findComment-393821 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.