我的 HTML 页面的一部分必须滚动
One part of my HTML page must scroll
我正在制作一个 "simple" HTML 页面，其中大部分定义为固定（作为位置）。但我只希望一部分可以滚动（#answers 部分）。
最后整个页面必须处于固定位置，#answers 必须是可滚动的。
我认为此时的解释已经足够了，但请我写更多的评论来解释 :p。但如果您有更多问题，我会更进一步。
你能帮忙吗？
这是代码：
// 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>
我希望答案在没有任何滚动条的情况下滚动到输入部分后面：
我相信添加 overflow: auto;您的 div 样式就是您所需要的。
要使您的答案 div 可滚动，您只需要做两件事：
- 为你的答案定义一些高度 div
- 应用overflow:scroll属性回答div
这就是我为回答所做的 div 使其滚动。我将 css 应用于 Html 本身，您可以使用单独的 Css 文件来定义这些 属性:
<div id="answers" style = "height:300px;overflow:scroll">
要使您的答案 div 可滚动，您只需要做两件事：
- 为你的答案定义一些高度 div
- 应用overflow:scroll属性回答div
这就是我为回答所做的事情 div 使其滚动。我将 css 应用于 Html 本身，您可以使用单独的 Css 文件来定义这些 属性:
<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>
我正在制作一个 "simple" HTML 页面，其中大部分定义为固定（作为位置）。但我只希望一部分可以滚动（#answers 部分）。
最后整个页面必须处于固定位置，#answers 必须是可滚动的。
我认为此时的解释已经足够了，但请我写更多的评论来解释 :p。但如果您有更多问题，我会更进一步。
你能帮忙吗？
这是代码：
// 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>
我希望答案在没有任何滚动条的情况下滚动到输入部分后面：
我相信添加 overflow: auto;您的 div 样式就是您所需要的。
要使您的答案 div 可滚动，您只需要做两件事：
- 为你的答案定义一些高度 div
- 应用overflow:scroll属性回答div
这就是我为回答所做的 div 使其滚动。我将 css 应用于 Html 本身，您可以使用单独的 Css 文件来定义这些 属性:
<div id="answers" style = "height:300px;overflow:scroll">
要使您的答案 div 可滚动，您只需要做两件事：
- 为你的答案定义一些高度 div
- 应用overflow:scroll属性回答div
这就是我为回答所做的事情 div 使其滚动。我将 css 应用于 Html 本身，您可以使用单独的 Css 文件来定义这些 属性:
<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>