ColMatrix Posted January 21, 2006 Share Posted January 21, 2006 Hi I am currently having trouble on how to control the height of a <div> tag.I have <div> tags seperating the page. I want the left <div> to increase its height...no matter how far the content (<div> which is to the right of the left <div>) go to the bottom...but without going too far to make the vertical scroll bar appear (IN the left <div> is a <list> tag for navigation purposes).Some tests:value-Auto...only makes the div go just past the <list> tag.value-100% does not extend when the page extends (due to content)value-em will chnage too far when I increase the text or wont extend with the content.I need it ro resize with the browser aswell, eg 800x640 and 1024x768 but to grow with the <div> on the right (content).Hope that explains the issues, Any help, suggestions would be much appreciated!Col Link to comment Share on other sites More sharing options...
Err Posted January 25, 2006 Share Posted January 25, 2006 <style type="text/css">div { height: 500px;}</style><div>Div Content</div> OR <div style="height: 500px;">Div Content</div> Link to comment Share on other sites More sharing options...
ColMatrix Posted January 25, 2006 Author Share Posted January 25, 2006 Thx for replying, The problem I would still have, is when the user changes their screen resolution, The left div would stay at 500px heigh, and not an 600px or 1024px (depending on user res) I have tried in % and it not work...and if I use ems it not change anyway and gets bigger (too big) or smaller when I enlarge the text...Any ideas?Cheers Col Link to comment Share on other sites More sharing options...
Err Posted January 26, 2006 Share Posted January 26, 2006 Have you tried using Tables? It could help reslove that issue. Just a thought Link to comment Share on other sites More sharing options...
jorge Posted January 26, 2006 Share Posted January 26, 2006 Could it be resolved using the "overflow" property in the div? There is an example of how it works in this url:http://www.w3schools.com/css/tryit.asp?fil...trycss_overflow Link to comment Share on other sites More sharing options...
~Shinta Posted January 26, 2006 Share Posted January 26, 2006 Percentages are the way to do it. Link to comment Share on other sites More sharing options...
johnmendel Posted January 27, 2006 Share Posted January 27, 2006 depending on user resolution is something which i looked into when i started. you could use the screen, i believe, item for IE. I think i might also work in FF. my java script is horrible, but it would look something in this nature. /* returns a boolean */<script type=javascript>function isSmall(){ return (screen.height < 768);}</script>then, (watch me really kill this code)<script type=javascript>function chooseCSS(){ if isSmall() somehow link that css sheet for under 768. I know its possible else /*their res height is 768 or more*/ include the sheet for over 768}</script> I missed alot of the magic inbetween, but thats the basic concept. BTW, you run chooseCSS on body's load. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now