- This topic is empty.
October 11, 2014 at 2:27 pm #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 divOctober 13, 2014 at 4:38 am #186105
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
http://codepen.io/anon/pen/yovkJOctober 13, 2014 at 9:28 am #186128shaneismeParticipant
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.October 14, 2014 at 1:40 am #186169
Here is the link to my problem and i guess solution:
- The forum ‘CSS’ is closed to new topics and replies.