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

[imag]

Hello
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:
http://www.magicmarinac.hr/razno/imagis/index2.html
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

[imag]

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%;
http://codepen.io/anon/pen/esqxL

Test 2
#wrapper height:auto;
http://codepen.io/anon/pen/yovkJ

[shaneisme]

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

https://css-tricks.com/snippets/css/sticky-footer/

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

[imag]

Here is the link to my problem and i guess solution:

http://stackoverflow.com/questions/26340021/absolutely-positioned-containing-div-to-fit-the-inside-content-or-viewport

TNX

[Author]

Posts