Jump to content
Sign in to follow this  
djp1988

Stretch height to fill void

Recommended Posts

I have an element with a fixed height. Inside this I have a form, a h3 element and then a ul list.The ul list has the CSS property overflow-y set to scroll. So I have a scroll bar.I would like to make the height of the list to fill up what's left of the height of the parent element. I can't set the height to 100% because it will equal the parent's height, and push out of the parents boundary as I have a form and h3 element above the list.What can I do to make the list stretch only to the available space left in the parent element ?

Share this post


Link to post
Share on other sites

Can't you just give it a fixed height and trial and error that value until gets as tall as you need it to be?

Share this post


Link to post
Share on other sites

Why not a fixed height for all the contents? Forms and form elements can all have fixed heights, defined borders, margins, padding, and so on. So can an h3 element. (Tip: define the height and line-height rules for an h element with the same value. You'll know exactly how tall it is, and the text will still be vertically centered.)If you are using <br> elements to lay out your form, don't. They may be introducing the seemingly random quality to the height of your form. You would do better to give dimensions, margins, float and clear properties to your form elements to lay them out. This gives you the pixel precision you need to do what you want.

Share this post


Link to post
Share on other sites
Why not a fixed height for all the contents? Forms and form elements can all have fixed heights, defined borders, margins, padding, and so on. So can an h3 element. (Tip: define the height and line-height rules for an h element with the same value. You'll know exactly how tall it is, and the text will still be vertically centered.)If you are using <br> elements to lay out your form, don't. They may be introducing the seemingly random quality to the height of your form. You would do better to give dimensions, margins, float and clear properties to your form elements to lay them out. This gives you the pixel precision you need to do what you want.
Or, if you just want to let the browser let you know when you reach the limit, you can do something like this....numbers are illustrative only
<html><head><style type="text/css">html, body {height:100%; margin: 0;"}</style></head><body><div style="height:100%; background-color:#fed;">        <div style=" background-color:#fff"><h2>Title</h2>Make this one white background so it does NOT appear to be coloured</div><div style="background-color:#fed;"><p>make this one the same colour as the container so if it overflows the container it will SEEM to be the same.</p><ul><li>one<li>two<li>three<li>four<li>five</ul><p>shrink the browser or add more content to see what happens on overflow</p></div>    </div> <!--end outer container--></body></html>

Guy

Edited by Guy Cousineau

Share this post


Link to post
Share on other sites

Thanks for the suggestions chaps, what I've found that works well is setting the list to position absolute, and having its top to the combined heights of the above elements, and bottom set to 0, which stretched the height to fill the parents height minus the top elements

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...
Sign in to follow this  

×
×
  • Create New...