Position absolutely a div and hide the rest of the page

Question

I'm coding an article (news) viewer on Polymer. I have all the articled displayed on screen and when one of them is clicked I have set an absolute positioned div with height: 100% and width: 100% to appear on screen. Until this point I have managed to perform all the logic correctly, but the div is not acting as I would like.

This is my code (it is written on Polymer, but the logic is quite similar to a plain HTML - CSS):

<style>
    :host {
        --my-elem-right: -9999px !important;
    }

    #article-container {
        position: absolute;
        top: 0;
        right: var(--my-elem-right);
        transition: right 0.3s linear;
        width: 100%;
        height: 100%;
        background-color: yellow;
    }
</style>

<template>
    <div id="article-container">
        <div on-tap="hideArticle">
            Atrás
        </div>
        <div>
            {{data.id}}
        </div>
        <div>
            {{data.schema:headline}}
        </div>
        <div>
            {{data.shcema:articleBody}}
        </div>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        ... x30 lorem ipsum
    </div>
</template>

<script>
...
    _visibilityChanged: function() {
            if(this.display){
                this.customStyle['--my-elem-right'] = '0px';
                this.updateStyles();
            }else {
                this.customStyle['--my-elem-right'] = -(screen.width+10) + 'px';
                this.updateStyles();
            }
        }
...
</script>

This element is later used on a page containing the articles at the same level, like this:

<div>
    <main-article-frame
        data="{{articlesData}}"
        defaultimage="elements/main-article-frame/assets/img/defaultImage.jpg"
        height="500">
    </main-article-frame>

    <div class="container my-5">
        <material-search
            active=True
            search-value="{{query}}"
            filters="{{filters}}">        
        </material-search>

        <div class="mt-5">
            <news-loader
                data="{{articlesData}}"
                defaultimage="elements/main-article-frame/assets/img/defaultImage.jpg">
            </news-loader>
        </div>
    </div>
    ____________ From here above is what I dont want to be seen
    ____________ This is my div element which appears when an article is clicked

    <article-viewer
        data=""
    >
    </article-viewer>

The problem is that, although this div appears, the articles which are hidden under this div are still visible if you scroll down. Moreover, if the text contained by the div is longer than the height of the screen, it will overflow. Here is an image which shows the problem.

I want to hide the rest of articles (my div is what can be seen on screen until they click on the "back" button, and the div to be scrollable if its content is higher than screen height.

Answer 1

All you need is CSS.

Try this:

    #article-container {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom:0;
opacity: 1;
z-index: 9;
transition: right 0.3s linear;
background-color: yellow;
} 

Note:
height don't always work on absolute containers, use the four corner positions instead like bottom, top, right, left

Answer 2

To prevent the articles hidden under the div from displaying, you could use position: fixed instead of position: absolute.

To ensure that you can scroll in the overlay div, you can use overflow: auto to show a scrollbar in the div if necessary:

    #article-container {
        position: fixed; /* Changed value */
        top: 0;
        right: var(--my-elem-right);
        transition: right 0.3s linear;
        width: 100%;
        height: 100%;
        background-color: yellow;
        overflow: auto; /* Show scrollbar in div if the contents overflow */
    }

To prevent the scrollbar for the "hidden" page (behind the div) from being visible, you can add overflow: hidden to body when the div is visible.

An advantage of doing this instead of position: absolute with top, left, right, bottom set to 0 (as suggested in another answer), is that the div will always be displayed at its top instead of being "pre-scrolled" if the user has scrolled in the page before the div is being shown.