Jump to content
ColMatrix

controlling the Height of a <div>

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

Share this post


Link to post
Share on other sites

<style type="text/css">div {  height: 500px;}</style><div>Div Content</div>

OR

<div style="height: 500px;">Div Content</div>

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Have you tried using Tables? It could help reslove that issue. Just a thought

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...