Question

我是CSS和HTML的新手。我刚刚浏览了socket.io chat application tutorial但发现当我输入太多信息以适应屏幕时，我无法向下滚动并看到它们。我花了几个小时研究这个，但找不到解决方案。似乎所有东西都有滚动条用于整个页面或者输入页脚从底部移开。

如何让无序列表滚动，以便可以完全看到底部消息，并且页脚始终位于底部？

目前的HTML如下：

<html>

<head>
  <title>Talk Page</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    form {
      background: #000;
      padding: 3px;
      width: 100%;
    }
    form input {
      border: 0;
      padding: 10px;
      width: 90%;
      margin-right: .5%;
    }
    form button {
      width: 9%;
      background: rgb(130, 224, 255);
      border: none;
      padding: 10px;
    }
    content {
      width: 100%;
      bottom: 10%;
      display: block;
    }
    #messages {
      list-style-type: none;
      margin-bottom: 30px;
      padding: 0;
    }
    #messages li {
      padding: 5px 10px;
    }
    #messages li:nth-child(odd) {
      background: #eee;
    }
  </style>
</head>

<body style="overflow:hidden;">
  <div id="content" ; style="overflow:auto;">
    <ul id="messages" style="font: 13px Helvetica, Arial;">
      <li>test</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li>19</li>
      <li>20</li>
      <li>21</li>
      <li>22</li>
      <li>23</li>
      <li>24</li>
      <li>25</li>
      <li>26</li>
      <li>27</li>
      <li>28</li>
      <li>29</li>
      <li>30</li>
      <li>31</li>
      <li>32</li>
      <li>33</li>
      <li>34</li>
      <li>35</li>
      <li>36</li>
      <li>37</li>
      <li>38</li>
      <li>39</li>
      <li>40</li>
      <li>41</li>
      <li>42</li>
      <li>43</li>
      <li>44</li>
      <li>45</li>
      <li>46</li>
      <li>47</li>
      <li>48</li>
      <li>49</li>
      <li>50</li>
      <li>last thing</li>
    </ul>
  </div>

  <div id="footer" style="position:fixed; bottom:0px; left:0px; right:0px; overflow:hidden;">
    <form action="">
      <input id="m" autocomplete="off" />
      <button>Submit</button>
    </form>
  </div>
</body>

</html>

编辑：收到几个答案后，我意识到我需要更具体一点。

我只希望滚动条位于列表的右侧;滚动条不应该在输入表单的右侧。

此外，页面需要能够调整大小并使列表展开或缩小以占用页面。

如果你看groupme web application，那几乎就是我想要的。

Answer 1

**编辑：**尝试将此CSS添加到要溢出的div ...高度：计算（100vh - 40px）; - 这需要100％的视图高度，并减去40px以考虑页脚高度。布局更改时还需要媒体查询：FIDDLE显示详细信息

<html>

<head>
  <title>Official London Talk Page</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    form {
      background: #000;
      padding: 3px;
      width: 100%;
    }
    form input {
      border: 0;
      padding: 10px;
      width: 90%;
      margin-right: .5%;
    }
    form button {
      width: 9%;
      background: rgb(130, 224, 255);
      border: none;
      padding: 10px;
    }
    content {
      width: 100%;
      bottom: 10%;
      display: block;
    }
    #messages {
      list-style-type: none;
      margin-bottom: 30px;
      padding: 0;
    }
    #messages li {
      padding: 5px 10px;
    }
    #messages li:nth-child(odd) {
      background: #eee;
    }
    .OverflowDiv
    {
      overflow: auto;
      height: calc(100vh - 40px);
    }
    @media screen and (max-width: 800px)
    {
        .OverflowDiv
        {
          height: calc(100vh - 75px);
        }
    }
  </style>
</head>

<body style="overflow: hidden;">
  <div id="content" class="OverflowDiv">
    <ul id="messages" style="font: 13px Helvetica, Arial;">
      <li>test2</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li>19</li>
      <li>20</li>
      <li>21</li>
      <li>22</li>
      <li>23</li>
      <li>24</li>
      <li>25</li>
      <li>26</li>
      <li>27</li>
      <li>28</li>
      <li>29</li>
      <li>30</li>
      <li>31</li>
      <li>32</li>
      <li>33</li>
      <li>34</li>
      <li>35</li>
      <li>36</li>
      <li>37</li>
      <li>38</li>
      <li>39</li>
      <li>40</li>
      <li>41</li>
      <li>42</li>
      <li>43</li>
      <li>44</li>
      <li>45</li>
      <li>46</li>
      <li>47</li>
      <li>48</li>
      <li>49</li>
      <li>50</li>
      <li>last thing</li>
    </ul>
  </div>

  <div id="footer" style="position:fixed; bottom:0px; left:0px; right:0px; overflow:hidden;">
    <form action="">
      <input id="m" autocomplete="off" />
      <button>Submit</button>
    </form>
  </div>
</body>

</html>

Answer 2

您应该将height属性添加到#message，直到达到所需的值：

<head>
  <title>Official London Talk Page</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    form {
      background: #000;
      padding: 3px;
      width: 100%;
    }
    form input {
      border: 0;
      padding: 10px;
      width: 90%;
      margin-right: .5%;
    }
    form button {
      width: 9%;
      background: rgb(130, 224, 255);
      border: none;
      padding: 10px;
    }
    #content {
      width: 100%;
      bottom: 10%;
      display: block;
    }
    #messages {
      list-style-type: none;
      margin-bottom: 30px;
      padding: 0;
      height: 300px;
    }
    #messages li {
      padding: 5px 10px;
    }
    #messages li:nth-child(odd) {
      background: #eee;
    }
  </style>
</head>

<body style="overflow:hidden;">
  <div id="content" ; style="overflow:auto;">
    <ul id="messages" style="font: 13px Helvetica, Arial;">
      <li>test2</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li>19</li>
      <li>20</li>
      <li>21</li>
      <li>22</li>
      <li>23</li>
      <li>24</li>
      <li>25</li>
      <li>26</li>
      <li>27</li>
      <li>28</li>
      <li>29</li>
      <li>30</li>
      <li>31</li>
      <li>32</li>
      <li>33</li>
      <li>34</li>
      <li>35</li>
      <li>36</li>
      <li>37</li>
      <li>38</li>
      <li>39</li>
      <li>40</li>
      <li>41</li>
      <li>42</li>
      <li>43</li>
      <li>44</li>
      <li>45</li>
      <li>46</li>
      <li>47</li>
      <li>48</li>
      <li>49</li>
      <li>50</li>
      <li>last thing</li>
    </ul>
  </div>

  <div id="footer" style="position:fixed; bottom:0px; left:0px; right:0px; overflow:hidden;">
    <form action="">
      <input id="m" autocomplete="off" />
      <button>Submit</button>
    </form>
  </div>
</body>

</html>

如何获取无序列表以使用页脚滚动

2 个答案: