javascript - 如何限制列表parant div的高度并使内容可滚动？

Question

我成功地在后台更改了 div 以适应所有项目，使用：

       newHeight = document.getElementById("searchResultsList").offsetHeight+115;//document.getElementById(newHeight).offsetHeight+newHeight;//document.getElementsByClassName("searchUserDiv").offsetHeight
       document.getElementById('searchDiv').style.height = ''+newHeight+'px';

然而问题是，在某些时候我需要停止向 div 添加高度，而是使 div 可滚动。我找到了 nav 元素，但还没有找到一种方法来设置最大高度（此时列表是可滚动的），它可以在动态添加元素时达到。我怎样才能做到这一点？

---

//In for each loop I do the following

$('.searchResultsList').append('<li class="searchUserDiv" id="'+newHeight+'"><img class="searchUserProfImg" id="searchUserProfImg" src="'+profileImg+'"><label class="searchUsername" id="searchUsername">'+username+'</label></li>');
           newHeight = document.getElementById("searchResultsList").offsetHeight+115;//document.getElementById(newHeight).offsetHeight+newHeight;//document.getElementsByClassName("searchUserDiv").offsetHeight
           document.getElementById('searchDiv').style.height = ''+newHeight+'px';

.searchBar {
  width: 500px;
  height: 55px;
  background-color: #3C3C3C;
  border-radius: 50px;
  margin-top: 12px;

  box-shadow: 0 1px 2px rgba(0, 0, 0, 0);
  transition: box-shadow 0.05s ease-in-out;
}

.searchBar:hover {
  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.5);
}

.searchBtn {
  margin-top: 1px;
  display: inline-block;
  width: 12%;
  height: 100%;
  background-color: transparent;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  /* background-image:url('../images/searchBtnIcon.png');
  background-size: 85%;
  background-repeat:no-repeat;
  vertical-align: middle; */
}

.searchBtn img {
  vertical-align: bottom;
  width: 96%;
  /* height: 100%; */
}

/* .searchBar button:hover {
  background-color: white;
} */

.searchDiv {
  vertical-align: top;
  height: 100%;
  margin-left: 50px;
  display: inline-block;
  background-color: #292929;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
}

.searchDiv input {
  display: inline-block;
  padding-bottom: 5px;
  padding-left: 30px;
  /* width: 500px;
  height: 50px; */
  width: 78%;
  height: 95%;
  border: none;
  /* background-color: #3C3C3C; */
  background-color: transparent;
  color: white;
  font: Arial;
  font-family: sans-serif;
  font-size: 18px;
  font-weight:bold;
  outline: none;
  /* border-radius: 50px; */
  vertical-align: top;
}

.searchDiv:hover ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #838383;
  opacity: 1; /* Firefox */
}
.searchDiv:hover {
  /* height: 600px; */
  /* background-color: #292929; */
  /* #3C3C3C; */
  box-shadow: 0 0px 10px rgba(41, 41, 41, 0.8);
}

.searchResultsList {
  /* background-color: grey; */
  padding-left: 0px;
}

.searchResultsList li {
  list-style: none;

  transition: 0.06s background-color;
}
.searchResultsList li:hover {
  background-color: rgba(255, 255, 255, 0.05);
}
.searchResultsList li:active {
  background-color: rgba(255, 255, 255, 0.1);
}
.searchResultsList * {
  /* background-color: grey; */
  /* margin: 13px 0 13px 0; */
  margin-top: 6px;
  margin-bottom: 6px;
  /* margin-left: 0px; */
  cursor: pointer;
}

.searchUserDiv {
  display: flex;
  align-items: center;
  /* background-color: #353258;
  border: 1px solid #4152F1; */
  color: white;
  cursor: pointer;
  padding-left: 10px;
  width: 98%;
  /* border-radius: 32px; */
}
.searchUsername {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  font: Arial;
  font-family: sans-serif;
  margin-top: 7px;
  padding-left: 13px;
}
.searchUserProfImg {
  border-radius: 25px;
  border: 1px solid #505050;
  margin-left: 5px;
  height: 47px;
  width:47px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="searchDiv" id="searchDiv">
        <div class="searchBar">
          <input type="text" placeholder="Search" name="search" id="search" required>
          <button class="searchBtn" id="searchBtn"> <img src="images/searchBtnIcon.png"></button>
        </div>
        <nav>
          <ul class="searchResultsList" id="searchResultsList" style="display: none;">
            <li class="searchUserDiv">
              <img class="searchUserProfImg" id="searchUserProfImg" src="images/defaultProfImg.png">
              <label class="searchUsername" id="searchUsername">Noha harrarri</label>
            </li>
            <li class="searchUserDiv">
              <img class="searchUserProfImg" id="searchUserProfImg" src="images/defaultProfImg.png">
              <label class="searchUsername" id="searchUsername">Nohasomething</label>
            </li>
            <li class="searchUserDiv">
              <img class="searchUserProfImg" id="searchUserProfImg" src="images/defaultProfImg.png">
              <label class="searchUsername" id="searchUsername">Noha_2</label>
            </li>
          </ul>
        </nav>
      </div>

标签： javascriptjqueryhtmlcss

Answer 1

将高度设置为 200px 之类的固定数字，然后为 div 设置溢出滚动。