One part of my HTML page must scroll - html

Question

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 :

Answer 1

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">

Answer 2

I believe adding overflow: auto; style to your divs is what you need.

Answer 3

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">
// 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" style = "height:300px;overflow:scroll">
<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>
// 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>