我试图制作可滚动的调查列表,可以通过添加overflow-y来滚动:滚动并设置一些高度:90%
直到调查列表只有12才正常工作。但是如果调查列表超过12,即13,调查列表以及整个窗口都可以滚动 我没有使用css / bootstrap。只使用角度材料2的角度材料,sass和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>
答案 0 :(得分:1)
最后能够实现只有调查列表可滚动,而不是通过添加属性溢出整个窗口:隐藏在我的body标签中。
body {
margin: 0;
background: lightgray;
overflow: hidden;
}