Как сделать так, чтобы переполнение отображалось на моем веб-сайте (я знаю атрибут overflow) ..?

#html #css

#HTML #css

Вопрос:

Это для онлайн-чата, вот краткое изложение моего клиентского кода:

 .msgln {
    margin: 0 0 2px 0;
    padding: 0.5%;
    border: 3px solid #eee;
}

#chatbox {
    text-align: left;
    margin: 0 auto;
    margin-bottom: 25px;
    background: #fff;
    height: 50%;
    width: 100%;
    overflow: auto;
    background-color: white;
}

 <div id="chatbox" style="list-style: none;">
  <li>
    <div class="msgln" data-user="Example">(current date)<b>Example</b>: <br/>The quick brown fox jumped over the lazy dog.
    </div>
  </li>
</div>

Развернуть фрагмент

Прокрутка отображается не внутри #chatbox , а только на всей странице, что означает, что вам нужно прокрутить вверх, чтобы увидеть заголовок страницы (и кнопку выхода), а затем вернуться вниз, чтобы увидеть новые сообщения.

1. Используйте overflow:auto

2. Это уже есть, обратите внимание на CSS.

3. Почему class="chatbox" , но css как #chatbox ?

4. Извините, это id="chatbox" в HTML, я написал это неправильно здесь.

5. @SwxtchCode, я это уже исправил

Ответ №1:

Как указано в комментарии выше, вам необходимо использовать <ul> тег в качестве родительского для <li> тегов.

#chatbox уже есть overflow: auto правило, а также высота 50%. И чтобы показать вам наглядно, я создал несколько <li> тегов и установил height: 100vh для <body> тега.

Это то, что вы хотели?

 * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
}

.msgln {
    margin: 0 0 2px 0;
    padding: 0.5%;
    border: 3px solid #eee;
}

#chatbox {
    text-align: left;
    margin: 0 auto;
    margin-bottom: 25px;
    background: #fff;
    height: 50%;
    width: 100%;
    overflow: auto;
    background-color: white;
}

 <ul id="chatbox" style="list-style: none;">
  <li>
    <div class="msgln" data-user="Example">(current date)<b>Example</b>: <br/>The quick brown fox jumped over the lazy dog.
    </div>
  </li>
  <li>
    <div class="msgln" data-user="Example">(current date)<b>Example</b>: <br/>The quick brown fox jumped over the lazy dog.
    </div>
  </li>
  <li>
    <div class="msgln" data-user="Example">(current date)<b>Example</b>: <br/>The quick brown fox jumped over the lazy dog.
    </div>
  </li>
  <li>
    <div class="msgln" data-user="Example">(current date)<b>Example</b>: <br/>The quick brown fox jumped over the lazy dog.
    </div>
  </li>
  <li>
    <div class="msgln" data-user="Example">(current date)<b>Example</b>: <br/>The quick brown fox jumped over the lazy dog.
    </div>
  </li>
  <li>
    <div class="msgln" data-user="Example">(current date)<b>Example</b>: <br/>The quick brown fox jumped over the lazy dog.
    </div>
  </li>
  <li>
    <div class="msgln" data-user="Example">(current date)<b>Example</b>: <br/>The quick brown fox jumped over the lazy dog.
    </div>
  </li>
  <li>
    <div class="msgln" data-user="Example">(current date)<b>Example</b>: <br/>The quick brown fox jumped over the lazy dog.
    </div>
  </li>
  <li>
    <div class="msgln" data-user="Example">(current date)<b>Example</b>: <br/>The quick brown fox jumped over the lazy dog.
    </div>
  </li>
</ul>

Развернуть фрагмент

Ответ №2:

Кажется, я не могу воспроизвести вашу проблему, но вы пробовали overflow:hidden ?