Div内容没有滚动。
Div内容没有滚动。
提问于 2021-05-20 13:19:08
我只是试着为雅思的阅读模块制作一个临时阅读软件，以提高我的英语阅读技能。但是，我试图在屏幕的右侧添加1-40个应答字段。
但不能滚动所有1-40回答输入字段。不知何故它不能滚动。尝试了overflow-y CSS属性，但没有成功。
.sidepanel {
width: 0;
position: fixed;
z-index: 1;
height: 100%;
top: 0;
right: 0;
background-color: #111;
transition: 0.5s;
padding-top: 60px;
}<div id="mySidepanel" class="sidepanel">
<div class="container">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">Close</a>
<div class="row">
<div class="col-md-12">
<h6 class="text-center">Answer-sheet</h6>
<div class="form-group">
<label>1</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>2</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>3</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>4</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>5</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>6</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>7</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>8</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>9</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>10</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>11</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>12</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>13</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>14</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>15</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>16</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>17</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>18</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>19</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>20</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>21</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>22</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>23</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>24</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>25</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>26</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>27</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>28</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>29</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>30</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>31</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>32</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>33</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>34</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>35</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>36</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>37</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>38</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>39</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>40</label>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-05-20 13:30:48
您需要为height: 100%和body元素定义overflow-y: scroll，并将overflow-y: scroll(或auto)添加到sidepanel元素中：
html, body {
height: 100%;
margin: 0;
}
.sidepanel {
box-sizing: border-box;
width: 180px;
position: fixed;
z-index: 1;
top: 0;
height: 100%;
right: 0;
background-color: #111;
transition: 0.5s;
padding-top: 60px;
overflow-y: scroll;
}<div id="mySidepanel" class="sidepanel">
<div class="container">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">Close</a>
<div class="row">
<div class="col-md-12">
<h6 class="text-center">Answer-sheet</h6>
<div class="form-group">
<label>1</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>2</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>3</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>4</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>5</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>6</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>7</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>8</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>9</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>10</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>11</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>12</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>13</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>14</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>15</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>16</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>17</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>18</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>19</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>20</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>21</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>22</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>23</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>24</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>25</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>26</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>27</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>28</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>29</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>30</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>31</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>32</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>33</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>34</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>35</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>36</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>37</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>38</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>39</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>40</label>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67621134
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号