Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question How can I create a div with max-height and overflow auto?

    Hi,

    See example at: http://jsfiddle.net/woomla/HRQzb/5/

    I have a div that I programmatically fill with items (rendered as div's). When the div reaches the bottom of it's parent div, it must stop growing and starts overflowing with a scrollbar. This is what's happening in the fiddle example.

    My problem is that divitems has a fixed max-height. I want this max-height to be relative to it's parent bottom. Can I do this with CSS only?

    The problem is that I don't know the height of DivB and I do not want DivC to have a fixed height!

    I hope someone can help me out because I'm really stuck with this for a long time.

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Quote Originally Posted by Woomla View Post
    I want this max-height to be relative to it's parent bottom.
    I do not understand! what do you mean by "relative to it's parent bottom"?

  • #3
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I want to have the bottom of the yellow window to always have the same minimum distance to the bottom of the purple window.

    The distance can/should be larger if there are less items in it. The yellow window should grow if there are more items added to it. It should start to overflow when the minimum-distance is reached.


    Let me try to explain that furter.

    The parent is the purple window. The divitems window is yellow. When you start the example, the yellow window has some height with some items in it. If you click on '5 items', the yellow window grows until it reaches the max-height of 250px. Then it starts to overflow.

    The bottom of the yellow window now has reached the minimum distance to the bottom of the purple window.

    The purple window has an absolute bottom value. When the parent of the purple window resizes, the purple window's height is changed.

    When that happens, I want the max-height of the yellow window to change as well. But I'm looking for a solution in CSS, not in javascript.

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Hard to tell which one is "purple" and "parent" usually refers to whatever encloses a child

    But I think you mean "There are two boxes, divB and divC. When divB increases (maybe because of adding a new nav category, divC max-height increases a certain value as well."

    Sorry there is no CSS solution for that. Try posting a simplified version of your question (model off the one I provided above) in the javascript forum!

  • #5
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Sammy12 View Post
    Sorry there is no CSS solution for that.
    Unfortunately .

    So I'll solve this with javascript. That's no problem, I was just looking for a nice CSS solution. I'm trying to minify all javascript required for this kind of DOM handling.

    Thanks for your time.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •