Cactusman07 Cactusman07 - 4 months ago 9
CSS Question

Keep backgound div to 100% width & height after JS used to display more content

I've built this site: http://dabble.market/cms/

All code (HTML, JS, CSS) has been added to the one HTML page as it's in WordPress and utilized a "Coming Soon" plugin. You can view the site and view the source to see the entire code for the page.

On the page I have a green downwards arrow, that when clicked uses JS effects to shrink the logo, and fade in text in a fullScreen div that's hidden on load which contains the content. This fullScreen div is not a child element of the div that sets the background (the div that sets the background utilizes a Google Map's plugin to set the Map as the background).

When the content in the div that is hidden initially becomes visible, the content overflows the boundaries of the div that sets the height and width and adds vertical scroll bars. My question is this though; is there a way to make this content fit the width/height of the div that fits the background, without pushing the content outside the boundaries of the background div? I still would like to keep the scroll bar - I just want the div with the content in it to scroll, while the div with the background remains at 100% width and height. I hope that makes sense...?

This is especially visible on mobile devices, as when you scroll downwards on a mobile device the Google Map remains as a background to the div, but the content div overflows the Map / background significantly.

Any help would be greatly appreciated :)

Answer

Try this

.fullScreen {
    overflow: auto;
}

You have set a parent div with 100% height, and you want to make its children scrollable. You should set the parent's overflow to auto or scroll.

Comments