Question

我在有div的地方写HTML，而在其中还有2个div。这两个div分别排列在另一个之下。第一个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

考虑到明确定义的高度的数量，您需要修改两件事来实现您想要的目标：

首先，从以下内容中删除样式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类的belowAvatar偏移量为-60px，因此将60px加到192px，得到252px。

结果如下：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

在图像标签内的第一个分区中写

style="position:fixed"

Answer 3

还有一些其他的事情你需要修复以达到完美的外观但我会回答你的问题，如果你添加这个css就可以解决问题：

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

修复div并滚动另一个

3 个答案: