The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Div with dynamic height pushing down content without leaving blank whitespace.

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #247989

    Hello guys,

    I am building a simple push-down effect which affects the position of two containers. So far I have managed to achieve a near-desired effect using fixed positioning for the hidden container, while changing its position to relative for the opened state.

    I want to apply a smooth transition to the blue main div, which is being pushed down by the hidden div with a class of .sub-header. How can I bypass the choppy rearrangement of the containers and is there a more elegant way of doing this instead of switching positioning on click? (e.g. fixed to relative in this case)

    NOTE: The heights of the current divs are fixed values, but I need this to be able to handle dynamic changes in the .sub-header height.

    NOTE: This should be achieved by adding a custom class, not using jQuery’s nested effects like .slideToggle etc.</b>

    Here is the Fiddle.

    I am getting really frustrated about this. Maybe this can be done by Javascript in some way?

    Thank You all in advance!


    If you don’t want to use jQuery (and it’s SlideUp/SlideDown methods), how about using Velocity.js instead. It handles the animation part in conjunction with a custom addition or removal of a trigger class. I did something like what you’re doing (dynamic-height content, that expands vertically to push stuff underneath down too) so maybe you can extract the bits you need from this

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.