One part of my HTML page must scroll

I am making a "simple" HTML page with most of it defined as fixed (as a position). But I only want one part to be scrollable (The #answers part).

At the end the entire page has to be in a fixed position and #answers must be scrollable.

I think it's enough explanation at this point but SO ask me to write more comments to explain :p. But sure if you have more questions I will go further.

Can you help ?

Here is the code :

    // Set the date we're counting down to
    var countDownDate = new Date("July 14, 2018 08:00:00").getTime();

    // Update the count down every 1 second
    var x = setInterval(function() {

        // Get todays date and time
        var now = new Date().getTime();

        // Find the distance between now an the count down date
        var distance = countDownDate - now;

        // Time calculations for days, hours, minutes and seconds
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);

        // Display the result in the element with id="countdown"
        document.getElementById("countdown").innerHTML = days.toString().padStart(2,"0") + ":" + hours.toString().padStart(2,"0") + ":"
        + minutes.toString().padStart(2,"0") + ":" + seconds.toString().padStart(2,"0") + "";

        // If the count down is finished, write some text 
        if (distance < 0) {
            clearInterval(x);
            document.getElementById("countdown").innerHTML = "EXPIRED";
        }
    }, 1000);

    @viewport{
        zoom: 1.0;
        width: extend-to-zoom;
    }
    @-ms-viewport{
        width: extend-to-zoom;
        zoom: 1.0;
    }
    html, body{
        width: 100%;
        height: 100%;
    }
    body{
        width: 100%;
        background-color: transparent;
        background-image: url("./images/maa_countdown_bg.png"), url("./images/background_pattern.png");
        background-position: center 230px, left top;
        background-repeat: no-repeat, repeat;
        background-attachment: fixed, fixed;
        background-size: 100%, auto;		
        font-family: Sitka Display;
        font-size:1.1em;

        color:white;
    }

    header{
        display: block;
        width:100%;
        height:233px;
        position:fixed;

        background-image: url("./images/block.png");
        background-position: left top;
        background-repeat: repeat;
        background-attachment: fixed;
        background-size: auto;

        text-align: center;
    }
    header #name{
        display:block;
        font-size: 4.0rem;
        font-family: 'Fipps', Arial, sans-serif;
        padding: 30px 10px 35px 10px;
        color:black;
    }
    header #countdown{
        display:block;
        margin:0 auto;
        width:100%;
        height:auto;
        position:relative;
        text-align:center;

        background-color:black;

        font-size:3.0rem;
    }

    section#page{
        width:100%;
        max-width:1000px;
        height:auto;
        display:block;
        position:fixed;
        top: 233px;
        margin:0 auto;
        left: 0;
        right: 0;
        padding: 10px 20px 40px 20px;

        background-color: rgba(255, 255, 255, 0.7);
    }
    section#page #question{
        background-image: none !important;
        text-align:center;
        font-size:calc(1.5rem + 1.5vw);
        white-space: nowrap;
        text-shadow: 2px 2px black;
        padding:10px;
    }
    section#page #post{

    }
    section#page #post form table{
        width:100%;
        margin:0 auto;
    }
    section#page #post form textarea{
        width:80%;
        min-height:150px;
        max-width:800px;
        margin:0 auto;
        display:block;
    }
    section#page #post form input{
        width:auto;
        margin:0 auto;
        display:block;
    }
    section#page #answer{

    }
    #answers{
        position:relative;
        overflow:auto;
    }
    .answer{
        padding: 10px 20px 10px 20px;
        margin: 10px;
        background-color:white;
        color:black;

        -webkit-border-top-left-radius: 15px;
        -webkit-border-top-right-radius: 15px;
        -webkit-border-bottom-right-radius: 15px;
        -webkit-border-bottom-left-radius: 5px;
        -moz-border-radius-topleft: 15px;
        -moz-border-radius-topright: 15px;
        -moz-border-radius-bottomright: 15px;
        -moz-border-radius-bottomleft: 5px;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
        border-bottom-left-radius: 5px;

        background-color: rgba(255, 255, 255, 0.8);
    }
    footer{
        position:fixed;
        width:100%;
        height:30px;

        background-color:black;

        font-size:1.5rem;
        text-align:center;

        bottom:0px;
    }

    <header>
        <span id="name">XXX</span>
        <div id="countdown"></div>
    </header>
    
    <section id="page">
    
            <div id="question">D'aprés vous, qu'est-ce que XXX ?</div>
            <div id="post">
                <form method="POST">
                    <table>
                        <tr>
                            <td><textarea name="answer"></textarea></td>
                        </tr>
                        <tr>
                            <td><input type="submit" name="submit" value="Envoyer"/></td>
                        </tr>
                    </table>
                </form>
            </div>
            <div id="answers">
                <div class="answer">Je ne sais pas ce que c'est mais cela à l'air énorme !</div>
                <div class="answer">Vivement le 14 Juillet pour en savoir plus sur ce concept... On reste un peu dans le brouillard mais bon... je vais prendre mon mal en patience.</div>
                <div class="answer">J'imagine que ça sera un jeu ?!</div>
                
                <div class="answer">Je ne sais pas ce que c'est mais cela à l'air énorme !</div>
                <div class="answer">Vivement le 14 Juillet pour en savoir plus sur ce concept... On reste un peu dans le brouillard mais bon... je vais prendre mon mal en patience.</div>
                <div class="answer">J'imagine que ça sera un jeu ?!</div>
                <div class="answer">Je ne sais pas ce que c'est mais cela à l'air énorme !</div>
                <div class="answer">Vivement le 14 Juillet pour en savoir plus sur ce concept... On reste un peu dans le brouillard mais bon... je vais prendre mon mal en patience.</div>
                <div class="answer">J'imagine que ça sera un jeu ?!</div>
                <div class="answer">Je ne sais pas ce que c'est mais cela à l'air énorme !</div>
                <div class="answer">Vivement le 14 Juillet pour en savoir plus sur ce concept... On reste un peu dans le brouillard mais bon... je vais prendre mon mal en patience.</div>
                <div class="answer">J'imagine que ça sera un jeu ?!</div>
                <div class="answer">Je ne sais pas ce que c'est mais cela à l'air énorme !</div>
                <div class="answer">Vivement le 14 Juillet pour en savoir plus sur ce concept... On reste un peu dans le brouillard mais bon... je vais prendre mon mal en patience.</div>
                <div class="answer">J'imagine que ça sera un jeu ?!</div>
            </div>
    </section>
    <footer>Mentions légales</footer>

I want the answers to scroll behind the inputs part whithout any scrollbar :

Solution

To make your answer div scrollable you just have to do Two things:

Define some height to your answer div
Apply overflow:scroll property to answer div

This is what i did to answer div make it scroll. I applied css to Html itself you can use separate Css file to define these property:

<div id="answers" style = "height:300px;overflow:scroll">