Jump to content

controlling the Height of a <div>


ColMatrix

Recommended Posts

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

<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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...