css - 如何在不使整个窗口可滚动的情况下使无序列表可滚动

Question

我正在尝试通过添加 overflow-y: scroll 并设置一些高度来制作可滚动的调查列表:90%

在调查列表只有 12 个之前，它一直在正常工作。但是，如果调查列表超过 12 个，即 13 个，调查列表以及整个窗口都可以滚动我没有使用 css/bootstrap。仅使用 Angular Material 、sass 和 Angular Material 2 的 flex 布局。

header {
  width: 100%;
}

.orange {
  background: #FFA500;
}

 body {
  margin: 0;
  background: lightgray;
   }


.survey-list {
margin:12px;

}

.session-detail {
height: 280px;
}


.customer-details {
margin-top:20px;
}


ul {
  list-style-type: none;
  background: white;

}

.surveys {
background: white;
height: 90%; //Or any other height you wish
overflow-y: scroll;

}


.summary-layout {
width: 290px;
}

.summary {
  padding: 1px;
margin-top: 20px;

}

.graph {
  height: 200px;
  width: 280px;
}

.array-layout {
  margin: 5px;
}


.export-report {
background:orange;
color:white;
}

.custom-report {
  background: orange;
  color:white;

  margin-left:62px;
}

.list {
  background: white;
  padding: 0;
  margin: 0;
  text-align: left
}

.notes {
  margin: 15px;
  padding: 15px;
  border: 1px solid black;
}

.list-item {
border:2px solid black;
}

<header>
  <mat-toolbar class="orange">
    <span class="text">
      <img src="data:image/png;base64,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"
        alt="logo" width="60" height="40">
    </span>

  </mat-toolbar>
</header>

<div fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">
  <div class="item item-1" fxFlex="10%">
    <mat-list class="surveys">
      <strong class="survey-list">Survey list</strong>
      <mat-list-item class="list-item">surevy 1</mat-list-item>
      <mat-list-item class="list-item">survey 2</mat-list-item>

      <mat-list-item class="list-item">survey 3</mat-list-item>

      <mat-list-item class="list-item">survey 4</mat-list-item>

      <mat-list-item class="list-item">survey 6</mat-list-item>

      <mat-list-item class="list-item">survey 7</mat-list-item>

      <mat-list-item class="list-item">survey 8</mat-list-item>

      <mat-list-item class="list-item">survey 9</mat-list-item>

      <mat-list-item class="list-item">survey 10</mat-list-item>
      <mat-list-item class="list-item">survey 11</mat-list-item>
      <mat-list-item class="list-item">survey 12</mat-list-item>
    </mat-list>
  </div>
  <div class="item item-2" fxFlex="15%">
    <mat-card class="customer-details">
      <strong>customer details</strong>
      Cname
      <br> Address
      <br> Ph.No
      <br> Email ID
      <BR> E-Bill
      <br>
      <br>
      <span class="notes">notes</span>
    </mat-card>
    <br>
    <br>

    <mat-card class="session-detail">
      <strong>Session details</strong>
      Surveyer name
      <br>Date of survey
      <br>Time of survey
      <br> Device details
      <BR>
      <br>
      <br>
      <span class="notes">description</span>


    </mat-card>

  </div>

  <div class="item item-2" fxFlex="50%">
    array layout
    <canvas class="array-layout" id="myCanvas" width="620" height="550" style="border:1px solid #000000;">
      Your browser does not support the HTML5 canvas tag.
    </canvas>
  </div>
  <div class="item item-2" fxFlex="25%">
    <ul class="summary-layout">
      <strong>Summary</strong>
      <li class="summary">Panel tilt</li>
      <li class="summary">Panel orientation</li>
      <li class="summary">Module rating</li>
      <li class="summary">System Size</li>
      <li class="summary">Yearly Generation</li>
      <li class="summary">Specific generation per day KW</li>
      <li class="summary"></li>
    </ul>
    <mat-card class="graph">Graph</mat-card>
<button mat-button class="export-report">Export Report</button>
<button mat-button class="custom-report">Customize Report</button>
  </div>
</div>

Answer 1

通过在我的 body 标签中添加属性 overflow:hidden 终于能够实现只有调查列表可滚动，而不是整个窗口。

body {
  margin: 0;
  background: lightgray;
  overflow: hidden;
  }