djp1988 Posted February 23, 2011 Share Posted February 23, 2011 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 ? Link to comment Share on other sites More sharing options...
thescientist Posted February 23, 2011 Share Posted February 23, 2011 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? Link to comment Share on other sites More sharing options...
jeffman Posted February 23, 2011 Share Posted February 23, 2011 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. Link to comment Share on other sites More sharing options...
cousineaug Posted February 24, 2011 Share Posted February 24, 2011 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 Link to comment Share on other sites More sharing options...
djp1988 Posted February 25, 2011 Author Share Posted February 25, 2011 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.