【发布时间】：2018-07-04 12:06:21
【问题描述】：
我正在制作一个“简单”的 HTML 页面，其中大部分都定义为固定的（作为位置）。但我只希望其中一部分是可滚动的（#answers 部分）。
最后，整个页面必须处于固定位置，并且#answers 必须是可滚动的。
我认为在这一点上已经足够解释了，但是请我写更多的 cmets 来解释：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>我希望答案在没有任何滚动条的情况下滚动到输入部分后面：
【问题讨论】：
-
您可以使用 position:fixed 固定内容和overflow:scroll 滚动内容
-
它不起作用。它添加了一个滚动条，但不滚动内容。