Создайте прокручиваемый div между двумя div

Во-первых, да, я читал много вопросов об этой проблеме, и Вот этот - это почти то, что мне нужно. Единственная проблема в том, что я получаю прокручиваемое целиком, когда мне не нужно прокручивать только средний div.

Может это из-за того, что я использую его в iFrame?

Это HTML-код моего iFrame:

<div id = "chat">
<div class = "row-1" id = "header" style = "height: 20%">
    <span>Live chat</span>
</div>
<div class = "row-1" id = "message" style = "overflow-y: scroll; height: 60%">
    <ul id = "messages" class = "list-group"></ul>
</div>
<div class = "row-1" id = "footer" style = "height: 20%" >
        <input type = "text" id = "myMessage" placeholder = "Type a message">
        <a id = "sendbutton" href = "#" class = "btn btn-success"><span class = "glyphicon glyphicon-send"></span> </a>
</div>

Я хочу сделать небольшой значок чата в правом нижнем углу, который при нажатии расширяется в маленький iFrame, отображая чат :)

Но я не могу прокрутить только средний div ...

Пример того, что я хочу: https://alpha.hacklyon.com/ Значок чат-бота в правом нижнем углу, когда вы его расширяете, это именно то, что я хочу!

Не могли бы вы показать CSS, который вы пробовали?

— 04.06.2018 09:52

Ну, у меня нет CSS, все в HTML, я просто пытаюсь заставить его работать, потом почищу! : / Итак, у вас есть все, ох, только iFrame: <div id = "chat_icon" style = "position: fixed; right: 0; bottom: 0; margin-bottom: 4%; margin-right: 4%";> <div class = "collapse" id = "iframe_holder" > <iframe src = "http://localhost:5000/chat" ></iframe> </div> <button class = "btn btn-lg btn-circle" data-target = "#iframe_holder" data-toggle = "collapse"><i class = "glyphicon glyphicon-send"></i></button> </div>

— 04.06.2018 10:01

html css iframe

04.06.2018 09:35

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

711

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

 #chat{
    width: 300px;
    height: 200px;
    overflow: auto;
}

<div id = "chat">
  <div class = "row-1" id = "header">
      <span>Live chat</span>
   </div>
   <div class = "row-1" id = "message">
   </div>
   <div class = "row-1" id = "footer" style = "height: 20%" ></div>
</div>

Думаю, я уже пробовал это, и могу подтвердить, что это не работает, нижний колонтитул и заголовок не всегда видны, а полоса прокрутки находится на всем div чата ...

— 04.06.2018 09:57

04.06.2018 09:53

 #chat{
   width: 300px;
   height: 200px;
}
#message{
     height: 200px;
     overflow-y: auto;
 }

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

— 04.06.2018 10:05

Извините, приятель, но нет: '(Я уже пробовал это сделать, так как это было для меня логичным способом сделать, но поместить overflow-y : scroll в div сообщения было недостаточно, так как весь div чата продолжает прокручиваться.

— 04.06.2018 10:08

04.06.2018 10:03

Ответ принят как подходящий

Это то, что вы ищите?

<div id = "chat_icon" style = "position: fixed; right: 0; bottom: 0; margin-bottom: 4%; margin-right: 4%" ;>
  <div class = "collapse" id = "iframe_holder">
    <div id = "chat">
      <div class = "row-1" id = "header" style = "height: 20%">
        <span>Live chat</span>
      </div>
      <div class = "row-1" id = "message" style = "overflow-y: scroll; height: 120px">
        <ul id = "messages" class = "list-group">23232323</ul>
        <ul id = "messages" class = "list-group">23232323</ul>
        <ul id = "messages" class = "list-group">23232323</ul>
        <ul id = "messages" class = "list-group">23232323</ul>
        <ul id = "messages" class = "list-group">23232323</ul>
        <ul id = "messages" class = "list-group">23232323</ul>
        <ul id = "messages" class = "list-group">23232323</ul>
        <ul id = "messages" class = "list-group">23232323</ul>
      </div>
      <div class = "row-1" id = "footer" style = "height: 20%">
        <input type = "text" id = "myMessage" placeholder = "Type a message">
        <a id = "sendbutton" href = "#" class = "btn btn-success"><span class = "glyphicon glyphicon-send"></span> </a>
      </div>
    </div>
  </div>
  <button class = "btn btn-lg btn-circle" data-target = "#iframe_holder" data-toggle = "collapse"><i class = "glyphicon glyphicon-send"></i></button>
</div>

Ну вот чего я и хочу! Большое спасибо, дружище!

— 04.06.2018 15:27

04.06.2018 11:59