исправить div и прокрутить другое

Question

Я пишу HTML, где есть div, а внутри него есть еще 2 div s. и эти 2 divs расположены один под другим. первый div (верхний) имеет аватар в нем, а во втором div есть некоторый контент. Мое требование состоит в том, чтобы сохранить первый div как есть, и второй div прокручиваемый (только второй div).

В настоящее время в моем коде весь div (родительский элемент) получает прокрутку, пожалуйста, дайте мне знать, как я могу это исправить.

ниже - мой HTML.

<div class="col-lg-3 col-md-3 col-sm-3"> 
    <div class="complaince-chat-box-new-avatar-div"> 
    <div class="complaince-chat-box-new-head" style="display:none">Compliance Avatar</div> 

    <div class="animatedAvatar" id="avatar"> 
     <br><img style="width: 174px;height: 200px;margin-left: -2px;" src="/ImageIcons/lisa.png"> 
    </div> 

    <div class="belowAvatar"> 
     <div class="Faq-chat-box-new-head"> 
     FAQs... 
     </div> 
     <div class="panel-body chat-box-new"> 
     <ul class="questionsUl"> 
      <li> 
      <p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p> 
      </li> 
      <li> 
      <p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p> 
      </li> 
      <li> 
      <p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p> 
      </li> 
      <li> 
      <p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p> 
      </li> 
      <li> 
      <p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p> 
      </li> 
      <li> 
      <p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p> 
      </li> 
      <li> 
      <p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p> 
      </li> 
      <li> 
      <p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p> 
      </li> 
      <li> 
      <p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p> 
      </li> 
      <li> 
      <p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p> 
      </li> 
      <li> 
      <p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p> 
      </li> 
      <li> 
      <p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p> 
      </li> 
      <li> 
      <p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p> 
      </li> 
      <li> 
      <p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p> 
      </li> 
      <li> 
      <p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p> 
      </li> 
      <li> 
      <p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p> 
      </li> 
      <li> 
      <p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p> 
      </li> 
      <li> 
      <p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p> 
      </li> 

     </ul> 
     </div> 
    </div> 
</div> 
</div> 

, пожалуйста, дайте мне знать, как я могу исправить первый div и сделать только отправку одной прокручиваемой. Вот рабочая скрипка. https://jsfiddle.net/byhrbos9/

Благодаря

Answer 1

Есть несколько других вещей, которые нужно исправить, чтобы достичь идеального внешнего вида, но я отвечу, что вы просили, проблема может быть исправлено, если добавить этот CSS:

.belowAvatar { 
    margin-top: -60px; 
    height: 200px; 
    overflow: scroll; 
} 

Answer 2

Учитывая количество явно определенных высот, вам необходимо изменить две вещи, чтобы достичь того, чего вы хотите:

Во-первых, удалите стиль overflow:scroll из следующих функций:

.col-lg-3 { 
    background-color: orange; 
    width: 35%; 
    overflow:scroll; 
} 

Это позволит удалить прокрутку для всего содержимого.

Во-вторых добавьте следующие стили к belowAvatar класса:

overflow-y:scroll; 
height: 252px; 

Высота определяется, принимая общую высоту контейнера DIV: 502px.

Удалить высоту animatedAvatar класс: 310px, что составляет 192px.

Затем, из-за margin-top смещения -60px на классе belowAvatar, вы добавляете 60px в 192px, чтобы получить 252px.

Результат выглядит следующим образом:

.col-lg-3 { 
 
    background-color: orange; 
 
    width: 35%; 
 
} 
 
.complaince-chat-box-new-avatar-div { 
 
    height: 502px; 
 
    border-radius: 43px; 
 
} 
 
.animatedAvatar { 
 
    width: 250px; 
 
    height: 310px; 
 
    margin-left: 0px; 
 
} 
 
.belowAvatar { 
 
    margin-top: -60px; 
 
    overflow-y: scroll; 
 
    height: 252px; 
 
} 
 
.Faq-chat-box-new-head { 
 
    padding: 10px 1px; 
 
    border-bottom: 1px solid #fff; 
 
    color: #fff; 
 
    text-align: center; 
 
    border-top-left-radius: 4em; 
 
    border-top-right-radius: 4em; 
 
    font-size: 15px; 
 
    height: 35px; 
 
} 
 
.chat-box-new { 
 
    height: calc(100% - 50px); 
 
} 
 
.questionsUl { 
 
    margin-left: -45px; 
 
} 
 
.questionsUl li { 
 
    color: #fff; 
 
    list-style: none; 
 
    margin-top: 0em; 
 
} 
 
#custBtn { 
 
    width: auto; 
 
    white-space: normal; 
 
    font-size: 13px; 
 
    border: 0px; 
 
    text-align: left; 
 
    padding: 0.5em; 
 
    margin-left: 0.85em; 
 
    cursor: pointer; 
 
}

<div class="col-lg-3 col-md-3 col-sm-3"> 
 
    <div class="complaince-chat-box-new-avatar-div"> 
 
    <div class="complaince-chat-box-new-head" style="display:none">Compliance Avatar</div> 
 

 
    <div class="animatedAvatar" id="avatar"> 
 
     <br> 
 
     <img style="width: 174px;height: 200px;margin-left: -2px;" src="/ImageIcons/lisa.png"> 
 
    </div> 
 

 
    <div class="belowAvatar"> 
 
     <div class="Faq-chat-box-new-head"> 
 
     FAQs... 
 
     </div> 
 
     <div class="panel-body chat-box-new"> 
 
     <ul class="questionsUl"> 
 
      <li> 
 
      <p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p> 
 
      </li> 
 
      <li> 
 
      <p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p> 
 
      </li> 
 
      <li> 
 
      <p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p> 
 
      </li> 
 
      <li> 
 
      <p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p> 
 
      </li> 
 
      <li> 
 
      <p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p> 
 
      </li> 
 
      <li> 
 
      <p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p> 
 
      </li> 
 
      <li> 
 
      <p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p> 
 
      </li> 
 
      <li> 
 
      <p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p> 
 
      </li> 
 
      <li> 
 
      <p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p> 
 
      </li> 
 
      <li> 
 
      <p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p> 
 
      </li> 
 
      <li> 
 
      <p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p> 
 
      </li> 
 
      <li> 
 
      <p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p> 
 
      </li> 
 
      <li> 
 
      <p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p> 
 
      </li> 
 
      <li> 
 
      <p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p> 
 
      </li> 
 
      <li> 
 
      <p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p> 
 
      </li> 
 
      <li> 
 
      <p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p> 
 
      </li> 
 
      <li> 
 
      <p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p> 
 
      </li> 
 
      <li> 
 
      <p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p> 
 
      </li> 
 

 
     </ul> 
 
     </div> 
 
    </div> 
 

 

 

 

 

 
    </div> 
 
</div>

Answer 3

В первом дивизионе внутри изображения метки записи

style="position:fixed"