Search code examples
htmlcssscrollfixed

Fixed div should be scrollable

I have following structure in my code:

<div id="layerContentLayer">
    <div id="layerContentLayerHead">
        <img class="imageLogo" src="/img/logo.png">
    </div>
    <div id="layerContentLayerBody">
        <div class="areaContentLayerText">
            <div class="contentItem" id="contentItem-99">
                <div class="contentItem-inner">
                    <div class="head"></div>
                </div>
            </div>
           <div class="areaContentForm"></div>
       </div>
   </div>
</div>

My CSS looks like this:

#containerContentLayer {
    opacity: 1;
    background: #FFF;
    background-image: none;
    background-repeat: repeat;
    width: 100%;
    height: 100%;
    z-index: 10;
    top: 0;
    left: 0;
    position: fixed;
    background-image: url('/img/Background_Contact.jpg');
    background-repeat: no-repeat
}
#layerContentLayer {
    width: 1000px;
    background-color: #f5f5f5;
    margin: 50px auto 0 auto;
}

This is a layer that is gonna be opened by clicking on a link. In this there is a contact form with inputs and labels and also a background-image that is set on display: none in the mobile view (smaller than 800px).

If I open the website with this structure, the layer opens but I can not scroll or swipe (it doesn't matter if I am looking at the site on my mobile phone or the browser).

I tried a lot like setting another attribute overflow-y: scroll but it didn't leed to success.

What do I have to change about my code that the scrolling/swiping is working?

Solution

  • I hope I understood your request correctly. First you need to set #layerContentLayer to a specific height so that browser knows what size to scroll (it can be px, % or whatever). Second you need to set it to overflow-y: scroll; (or auto...).

    Here is a fiddle example: https://jsfiddle.net/64z8ef30/