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

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

Answer 2

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

1. Define some height to your answer div
2. 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 3

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

1. Define some height to your answer div
2. 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>