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

Home Forums CSS [Solved] Containing div to fit the inside content or viewport

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

    I am making a responsive panel navigation and I have a problem..
    The problem is that I can’t get the containing div to fit the inside content if content is smaller than the viewport or be 100% of the body/viewport and get a scroll.

    The example is here:
    I am talking about the hidden panel menu that opens clicking the + icon in the top left corner

    I get two things:
    1. (present situation) containing div(#wrapper) is 100% viewport height and the empty grey area at the bottom is obstructing the clickability of the map beneath which is a must have :)
    2. if containing div’s height is set to auto then it is high as inside content(#left-menu-top) which is great but i don’t get a scroll if viewport is smaller than the containing div


    If anyone is still willing I have made a reduced test case on codepen.

    Test 1 gets a scroll(good) when the content is bigger then the viewport
    but the wrapper is 100% of the viewport when the content is smaller(bad, no clickability under that div and the button must stay under that div regarding z-index)
    Test 2 is vice versa.
    I need a mix of those examples – for the wrapper to get a scroll if the viewport is smaller and fit the inside content if viewport is bigger.

    Am I stupid or what – it seem to be a simple task

    Test 1
    #wrapper height:100%;

    Test 2
    #wrapper height:auto;


    I’m not 100% sure from what you’re describing, but I think you’re looking for a sticky footer?

    That will keep the button at the bottom when content is short + push the button down after the content gets long.

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