CSS-如何制作动态的引导列表可滚动

Question

我在VUE应用程序中有此代码，

            <form class="d-flex me-auto" id="searchBar">
                <div class="input-group">
                    <input class="form-control" type="text" placeholder="Cerca professionista" @keyup="search" aria-label="Search" v-model="searchInput">
                    <button class="btn btn-outline-success" @click.prevent="search">
                        <i class="fa-solid fa-search"></i>
                    </button>
                </div>
            </form>
            <div class="list-group" v-if="searchResults.length > 0" id="searchResultsList">
                <a href="#" class="list-group-item list-group-item-action" v-for="(result, index) in searchResults" :key="index" id="searchResult" @click.prevent="showUserProfile(result.username)">
                    <div class="d-flex w-100 justify-content-between">
                        <p class="ps-2 me-auto mb-1">{{ result.name }} {{ result.surname }}</p>
                        <!-- <img :src="result.propicUrl" id="searchResultThumbnail"> -->
                    </div>
                    <small class="ps-2 me-auto">{{ result.category }}</small>
                </a>
            </div>

我将有一个列表，其中包含搜索结果，因为有很多结果，如何使其可以滚动？目前，我添加了此CSS规则，但不起作用

<style lang="scss">
#menu {
    height: 75px;
    .navbar-brand {
        padding-top: 0;
        #logo {
            width: 60px;
            height: 60px;
        }
    }
    #searchBar {
        width: 420px;
    }
    #searchResultsList {
        position: absolute;
        top: 3.8em;
        left: 5.4em;
        width: 420px;
        overflow-y: scroll;
        #searchResult {
            overflow-y: scroll;
            #searchResultThumbnail {
                height: 40px;
                width: 40px;
                border-radius: 50%;
            }
        }
    }
}
</style>

Answer 1

您需要将高度或max-height设置为导致具体大小的值（例如：40VW，200px < /code>，20pt）用于溢出Y：自动|滚动有任何效果。

如果不设置（max-）高度，则该元素将增长以匹配其孩子的高度，并且永远不会显示活动的滚动栏。

旁注：考虑元素具有位置：绝对，高度：100％可能会将高度请求委派给最近的定位的祖先但是，您确实需要一个带有 concrete concrete Height的位置祖先， Overfloflflow y ：自动|滚动工作。

通用示例：

Vue.createApp().mount('#app')

#app {
  max-height: 100px;
  overflow-y: auto;
  border: 1px solid red;
}

<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
<div id="app">
  <div v-for="n in 20">test</div>
</div>

---

操场：

const { createApp, reactive, toRefs } = Vue;

createApp({
  setup: () => ({
    ...toRefs(reactive({
      setHeight: false,
      setMaxHeight: true,
      listLength: 20
    }))
  })
}).mount('#app')

#app {
  display: flex;
}

#app>* {
  flex: 0 0 50%;
}

.scroller {
  overflow-y: auto;
  border: 1px solid red;
}

.controls {
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
}

* {
  box-sizing: border-box;
}

<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
<div id="app">
  <div class="scroller" :style="{ height: setHeight ? '100px' : '', maxHeight: setMaxHeight ? '100px': ''}">
    <div v-for="n in listLength">test</div>
  </div>
  <div class="controls">
    <div>
      Items: <input type="number" v-model="listLength">
    </div>
    <label>
      <input v-model="setHeight" type="checkbox">
      Set height
    </label>
    <label>
      <input v-model="setMaxHeight" type="checkbox">
      Set max height
    </label>
  </div>
</div>

---

设置高度和Max-height之间的区别在于，即使没有足够的内容，元素即使它具有指定的高度也将具有指定的高度要填写它，而使用Max-Height，当您没有足够的内容时，该元素将一直缩小到0（除非其他东西给它一个软最小值：例如：flex容器）。