Question

我有两个div，名为sidenav和mainscreen。我已经通过bootstrap分配了sidenav 1列和mainscreen 11列。 Floowing是以下的输出。

我想让sidenav不可滚动，但主屏应该是可滚动的。许多解决方案建议使用p osition:fixed。我试图使sidenav的位置固定，但它破坏了整页的风格。以下是使用sidenav固定位置后的输出。

以下是html！

<div class="container-fluid" style="width: 100%; padding: 0">
    <div class="row" style="width: 100%;margin: 0px">
        <nav class="sidenav col-md-1">
            <ul class="menu">
                <li class="menu-item">
                    <img src="../../assets/images/Mask Group 7.svg" alt="Logo" width="75"height="75">

                </li>
                 <li class="menu-item">
                    <a routerLink ="/connect" style="width: 32%;height: 50%">
                         <img src="../../assets/images/home.svg" alt="Home"  width="100%" height="100%"> 
                         <span class="navtext">home</span>

                     </a>
                </li>
                 <li class="menu-item">
                   <a routerLink ="/connect" style="width: 32%;height: 50%">
                     <img src="../../assets/images/accept-file-or-checklist.svg" alt="Home" width="100%" height="100%">
                       <span class="navtext">approval </span>
                     </a>
                </li>
                 <li class="menu-item">
                    <a routerLink ="/connect" style="width: 32%;height: 50%">
                     <img src="../../assets/images/folded-text-document.svg" alt="Home" width="100%" height="100%"> 
                         <span class="navtext">document</span>
                     </a>
                </li>
                 <li class="menu-item">
                    <a routerLink ="/connect" style="width: 32%;height: 50%">
                     <img src="../../assets/images/wukla_logo.svg" alt="Home" width="100%" height="100%">
                         <span class="navtext">wukla</span>
                     </a>
                </li>
            </ul>
        </nav>
        <div  class="mainscreen col-md-11">
                <div class="header">
                    <div class="inputs">
                        <div class="input-group">
                          <span class="input-group-btn" style="height:45px">
                            <button class="searchinputbtn btn btn-secondary" type="button" style="border-style: none;border-radius: 0">hate</button>
                          </span>
                          <input type="text" class="form-control" placeholder="Product name" style="border-style: none">
                          <span class="input-group-btn">
                            <button class="searchinputbtn btn btn-secondary" type="button" style="border-style: none;border-radius: 0">love</button>
                          </span>
                        </div>
                        <button class="uploadbtn btn btn-secondary" type="button" style="border-style: none;border-radius: 0">Upload Document</button>
                      </div>
                </div>
                <div class="mainbody">
                    <div class="itemstodisplay">
                        <div class="notification">
                            <div class="bodytext">pending signatures</div>
                            <div class="components">
                                <app-pendingdoc [requestid]="pendingdoc.requestid" [title]="pendingdoc.title"></app-pendingdoc>
                                <app-pendingdoc [requestid]="pendingdoc.requestid" [title]="pendingdoc.title"></app-pendingdoc>
                                <app-pendingdoc [requestid]="pendingdoc.requestid" [title]="pendingdoc.title"></app-pendingdoc>
                                <app-pendingdoc [requestid]="pendingdoc.requestid" [title]="pendingdoc.title"></app-pendingdoc>
                            </div>
                        </div>
                        <div class="alldocs">
                            <div class="bodytext">all documents</div>
                            <div class="components">
                                <app-paksigndocument></app-paksigndocument>
                                <app-paksigndocument></app-paksigndocument>
                                <app-paksigndocument></app-paksigndocument>
                                <app-paksigndocument></app-paksigndocument>
                            </div>
                        </div>
                        <div class="wukladocs">
                            <div class="bodytext">wukla documents</div>
                            <div class="components">
                            </div>
                        </div>    
                    </div>
                </div>
        </div>
    </div>
</div>

以下是scss！

#ID {
overflow: hidden
}
.sidenav {
    position: fixed;
    padding: 0;
    background-color: #e6e6e6                                                                                               ;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: auto;
}
.menu {
    padding: 0px;
    list-style: none;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.menu-item {
    border-bottom: 1px solid #ffffff;
    height: 10%;
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
    align-items: center;
}
.mainscreen {
    padding: 0;
    height: 1450px;
}
.header {
    display: flex;
    align-items: center;
     flex-direction: column;
    justify-content: center;
    //width: 1259px;
    width: 100%;
    height: 36%;
    opacity: 0.58;
    background-color: #8cd1bc;
}

.mainbody {
    height: 64%;
    background-color: #f6f6f6;
}
.input-group{
    width: 100%;
}
.searchinputbtn {
    height: 20px;
}
.uploadbtn {
    margin-top: 42px;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 2px;
  background-color: #e6e6e6;
  font-size: 16.8px;
  font-weight: bold;
  letter-spacing: -0.3px;
  text-align: left;
  color: #ffffff
}
.inputs {
    width: 35%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.navtext {
    font-size: 11px;
  line-height: 0.95;
  letter-spacing: -0.3px;
  text-align: left;
  color: #59626a;
}

.itemstodisplay {
    width: 100%;
    height: 100%;
}

.notification {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 26%;
    background-color: azure;
}
.bodytext{
    margin-bottom: 20px;
    margin-top: 50px;
     font-size: 20px;
  line-height: 0.53;
  letter-spacing: -0.5px;
  text-align: left;
  color: #73c7af;
}
.alldocs{
     display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 38%;
    background-color: cornsilk;
}
.wukladocs {
     display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 38%;
    background-color:floralwhite;
}
.components {
    height: 80%;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
}

有人可以帮我制作sidenav不可滚动的吗？

Answer 1

您可以使用position: fixed并将div拉伸到整个页面的长度。这可以通过以下CSS完成：

div {
    position: fixed;
    top: 0;
    bottom: 0;
}

然后你可以使主屏幕可滚动并保持sidenav固定。

Answer 2

试试这个：

.navbar-fixed-left {
  width: 140px;
  position: fixed;
  border-radius: 0;
  height: 100%;
}

.navbar-fixed-left .navbar-nav > li {
  float: none;  /* Cancel default li float: left */
  width: 139px;
}

请参阅此文章了解更多信息： Usefull Article

使div不可滚动

2 个答案: