问题描述
我是VueJS的新手。 我正在使用Vue和Bootstrap开发应用程序。 该页面分为左侧边栏，顶部导航栏，中心视图和右侧边栏，如下所示：
我正在寻找一个滚动条，以便只有中心内容是可滚动的
这是代码：
import GridView from 'src/components/Dashboard/Views/GridView.vue' import ListView from 'src/components/Dashboard/Views/ListView.vue' import DetailsView from 'src/components/Dashboard/Views/DetailsView.vue' export default { methods:{ changeView(){ if(this.gridView === true){ this.gridView = false; } else if(this.gridView === false){ this.gridView = true; } }, openDetailsSection() { if(this.detailsSectionOpen === false){ this.detailsSectionOpen = true; } this.$nextTick(() => { const detailsSection = document.getElementById("details"); const showSection = document.getElementById("show"); showSection.style.width = "80%"; // showSection.classList.remove("col-xl-12", "col-md-6"); }) }, closeDetailsSection(){ if(detailsSectionOpen === true){ detailsSectionOpen = false; } const detailsSection = document.getElementById("details"); const showSection = document.getElementById("show"); detailsSection.classList.remove("col-xl-3"); showSection.classList.remove("col-xl-9", "col-md-6"); showSection.classList.add("col-xl-12", "col-md-6"); // Remove info button const infoButton = document.getElementById('infoButton'); if (infoButton) { infoButton.parentNode.removeChild(infoButton); } }, }, data(){ return { detailsSectionOpen: false, gridView: true, shared: false } }, components: { ListView, GridView, DetailsView }, mounted(){ let folders = document.getElementsByClassName('folder-rectangle'); folders = Array.from(folders); folders.forEach((folder) => folder.addEventListener('click', this.showButton)); } }
.context-menu-item:hover { background-color: #E91E63 !important; } .plus-circle-btn{ font-size: 70px; color: #E91E63; border: none; cursor: pointer; } li .btn:hover{ color: #E91E63; } .details-ul li{ width: 261px; height: 29px; color: #424242; font-family: 'Source Sans Pro'; font-size: 14px; text-align: left; line-height: 1px; padding: 5px; } .color{ background-color: #DCF3FD; } #context-menu-icon{ color: #424242; } .header-rectangle { height: 155px; background: #F5F5F5; border: 1px solid #E0E0E0; border-radius: 0px; border-bottom: none; } .footer-rectangle { height: 65px; background: #FAFAFA; border: 1px solid #E0E0E0; border-radius: 0px; vertical-align:middle; text-align:center; } #image { height: 16px; border: 0px; color: #878D99; } .file-name-style{ height: 26px; color: #424242; font-family: 'Source Sans Pro'; font-size: 15px; font-weight: normal; font-style: normal; text-decoration: none; text-align: left; padding: 5px 15px; } .file-size-style{ height: 26px; color: #9E9E9E; font-family: 'Source Sans Pro'; font-size: 12px; text-align: left; line-height: 1px; padding: 10px 15px; } .breadcrumb-hr { -moz-border-bottom-colors: none; -moz-border-image: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; margin-left: 15px; margin-right: 15px; margin-bottom: 25px; border: 1px solid #BDBDBD; margin-top: 0px; border-top-width: 0px; } .breadcrumb-hr-details { -moz-border-bottom-colors: none; -moz-border-image: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border: 1px solid #BDBDBD; margin-top: 0px; border-top-width: 0px; } .details-section-hr{ -moz-border-bottom-colors: none; -moz-border-image: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border: 1px solid #BDBDBD; margin-top: 0px; border-top-width: 0px; } .folder-rectangle { height: 63px; background-color: #FFFFFF; border: 1px solid rgb(189, 189, 189); border-radius: 0px; } .folder-selected { background: #DCF3FD; border: 1px solid #BDBDBD; border-radius: 0px; box-shadow:0px 0px 5px 0px rgba(3,169,244,1) } .file-selected { height: 63px; background: #DCF3FD; border: 1px solid #BDBDBD; border-radius: 0px; box-shadow:0px 0px 5px 0px rgba(3,169,244,1) } #folder-image{ width: 29px; height: 20px; color: #878D99; font-size: 30px; } .context-menu{ width: 197px; height: 400px; background: #FFFFFF; border: 1px solid #FFFFFF; border-radius: 5px; box-shadow: 0 0 5px #333; } .context-menu-span{ padding-left: 10px; color: #424242; } .btn{ background-color: none; border: none; color: grey; padding: 12px 16px; font-size: 16px; cursor: pointer; } .folder-name-style{ text-align: left; margin-bottom: 0px; margin-top: 13px; margin-left: 15px; padding-left: 10px; padding-right: 10px; margin-right: 15px; color: #424242; font-family: 'Source Sans Pro'; font-size: 15px; font-weight: normal; font-style: normal; text-decoration: none; } .folder-size-style{ text-align: left; margin-left: 15px; margin-bottom: 13px; margin-top: 8px; padding-left: 10px; padding-right: 10px; margin-right: 10px; color: #9E9E9E; font-family: 'Source Sans Pro', sans-serif; font-size: 12px; } #no-padding{ padding: 0px; } #grid-view{ overflow-y: scroll; } #grid-view::-webkit-scrollbar { width: 1em; } #grid-view::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); } #grid-view::-webkit-scrollbar-thumb { background-color: darkgrey; outline: 1px solid slategrey; }
<template> <div> <div class="content" style="padding-top: 3px;" id="show"> <div class="container-fluid"> <ol class="breadcrumb" id="topButtons" style="display: flex;width: 100%;padding: 0rem 1rem;background-color: transparent;margin-bottom: 0px;"> <li class="breadcrumb-item active" style="margin-right: auto; margin-left: 0px; padding-top: 13px; color: #424242; font-family: 'Source Sans Pro'; font-size: 18px; font-weight: normal; font-style: normal; text-decoration: none; text-align: left;"> Files </li> <li class="pull-right"> <button class="btn"> <i class="fa fa-sort-amount-asc"> </i> </button> </li> <li class="pull-right"> <button v-if="gridView === false" @click="changeView" class="btn"> <i class="fa fa-th-large"></i> </button> <button v-if="gridView === true" @click="changeView" class="btn"> <i class="fa fa-list-ul"> </i> </button> <button v-if="!detailsSectionOpen" class="btn" id="infoButton" @click="openDetailsSection"> <i class="fa fa-info-circle"></i> </button> </li> </ol> <!-- Line break --> <hr class="breadcrumb-hr"> <div> <!-- Grid view secation begins here --> <grid-view v-if="gridView === true" :folders="folders" :recentFiles="recentFiles" id="grid-view" > </grid-view> <!-- List View section begins here --> <list-view v-if="gridView === false" :folders="folders" :recentFiles="recentFiles"> </list-view> </div> </div> </div> <details-view v-if="detailsSectionOpen" id="details"></details-view> </div> </template>
我正在尝试为id =“ show”开发一个滚动条，以使2条之间的内容可滚动，但是我不能这样做。
有人可以帮我吗？ 我真的很感谢您的帮助。 谢谢！
1楼
设置一个固定的height并使用overflow-y ，例如：
#show {
height: 600px;
overflow-y: scroll;
}