Как получить неупорядоченный список для прокрутки с помощью нижнего колонтитула

Я новичок в 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>

EDIT: Получив несколько ответов, я понял, что мне нужно быть немного более конкретными.

Я только хочу, чтобы полоса прокрутки находилась справа от списка; полоса прокрутки никогда не должна находиться справа от формы ввода.

Кроме того, страница должна быть изменена и иметь список, расширяемый или сокращающийся, чтобы перейти на страницу.

Если вы посмотрите на groupme web application, это почти то, что я хочу.

источник

2016-06-24 Pro Q

https: // jsfiddle.net/z1yo22fv/ См. мой ответ ниже – deebs

** EDIT: ** Попробуйте добавить этот CSS к div, который вы хотите переполнить ... height: calc (100vh - 40px); - это занимает 100% высоты представления и вычитает 40 пикселей для учета высоты нижнего колонтитула. Потребуется медиа-запрос, а когда изменения макета: 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>

источник

2016-06-24 19:25:32 deebs

Это работает как обходной путь, спасибо. Но я бы хотел, чтобы панель прокрутки не была справа от формы ввода. Я по сути хочу сохранить весь список (и полосу прокрутки) ** выше ** входную форму внизу. Я обновил свой ответ, чтобы отразить это. –

Хорошо, теперь я понимаю. Попробуйте добавить это в div с переполнением: auto .... height: calc (100vh - 30px); -Посмотрите отредактированный ответ. Может потребоваться добавить медиа-запрос для небольших экранов, где кнопка отправки будет ниже текстового поля, а css будет ... height: calc (100vh - 60px) – deebs

Вы должны добавить свойство высоты к #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>

источник

2016-06-24 19:25:39 msantos

Это не сработало для меня, потому что я все еще хочу, чтобы сообщения расширялись, чтобы заполнить страницу, когда кто-то ее изменяет. Я обновил свой вопрос, чтобы отразить это. –

Кроме того, крайность в 15 пикселей показалась мне самой лучшей. –

Как получить неупорядоченный список для прокрутки с помощью нижнего колонтитула

ответ

Смежные вопросы