我正在尝试将离子平板电脑应用程序中的菜单定位为“固定”并允许相邻列滚动 - 两者都不滚动。
一直在尝试使用Sass来设置固定和粘性定位但是效果不佳。因此，我给左侧“固定”列定义了一个像素高度，然后将右列中的溢出设置为溢出。
然而，考虑到各种平板电脑设备的尺寸，这种技术有点'受欢迎'。我试图使用百分比作为左列（#SortingFilters）的高度，但它不起作用。对此有适当的解决方案吗？ （将左列的高度设置为100％也不起作用。）
代码如下：
HTML页面/视图
<ion-content>
<ion-grid no-padding>
<ion-row>
<ion-col col-3 ion-fixed id="sortingFilters">
<h2>Sorting Filters</h2>
<div id="accordion">
<div class="accordion-content-wrapper">
<h4 class="accordion-toggle dormantState" (click)="toggleIconSize()">Size <ion-icon id="collapseIcon" [name]="buttonIconSize"></ion-icon></h4>
<div class="accordion-content">
<p>Select whether the creature is microscopic or bigger than microscopic (can be seen with naked eye).</p>
<ion-list radio-group [(ngModel)]="size">
<ion-item>
<ion-label>All Sizes</ion-label>
<ion-radio id="all" value="" checked></ion-radio>
</ion-item>
<ion-item>
<ion-label>Microscopic</ion-label>
<ion-radio id="micro" value="micro" ></ion-radio>
</ion-item>
<ion-item>
<ion-label>Non Microscopic</ion-label>
<ion-radio id="nonmicro" value="nonmicro" ></ion-radio>
</ion-item>
</ion-list>
</div>
</div>
<div class="accordion-content-wrapper">
<h4 class="accordion-toggle dormantState" (click)="toggleIconShell()">Shell <ion-icon [name]="buttonIconShell"></ion-icon></h4>
<div class="accordion-content">
<p>What type of shell does the creature have?</p>
<ion-list radio-group [(ngModel)]="shell">
<ion-item>
<ion-label>All Types</ion-label>
<ion-radio id="all" value="" checked></ion-radio>
</ion-item>
<ion-item>
<ion-label>No Shell</ion-label>
<ion-radio id="no-shell" value="noshell"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Single Shell</ion-label>
<ion-radio id="single-shell" value="oneshell"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Double shell</ion-label>
<ion-radio id="double-shell" value="doubleshell"></ion-radio>
</ion-item>
</ion-list>
</div>
</div>
<div class="accordion-content-wrapper">
<h4 class="accordion-toggle dormantState" (click)="toggleIconLegs()">Legs <ion-icon [name]="buttonIconLegs"></ion-icon></h4>
<div class="accordion-content">
<p>How many pairs of legs does the creature have?</p>
<ion-list radio-group [(ngModel)]="legs">
<ion-item>
<ion-label>All Types</ion-label>
<ion-radio id="all" value="" checked></ion-radio>
</ion-item>
<ion-item>
<ion-label>No legs</ion-label>
<ion-radio id="no-legs" value="nolegs"></ion-radio>
</ion-item>
<ion-item>
<ion-label>3 pairs</ion-label>
<ion-radio id="3pairs" value="threepairs"></ion-radio>
</ion-item>
<ion-item>
<ion-label>4+ pairs</ion-label>
<ion-radio id="4pairs" value="fourpairs"></ion-radio>
</ion-item>
</ion-list>
</div>
</div>
<div class="accordion-content-wrapper">
<h4 class="accordion-toggle dormantState" (click)="toggleIconTail()">Tail <ion-icon [name]="buttonIconTail"></ion-icon></h4>
<div class="accordion-content">
<p>Does the animal have a tail or not? If so, how many tails present?</p>
<ion-list radio-group [(ngModel)]="tail" class="propertFilters">
<ion-item>
<ion-label>All Types</ion-label>
<ion-radio id="all" value="" checked></ion-radio>
</ion-item>
<ion-item>
<ion-label>No tail</ion-label>
<ion-radio id="no-tail" value="notail"></ion-radio>
</ion-item>
<ion-item>
<ion-label>1 tail</ion-label>
<ion-radio id="oneTail" value="onetail"></ion-radio>
</ion-item>
<ion-item>
<ion-label>2 tails</ion-label>
<ion-radio id="twoTail" value="twotail"></ion-radio>
</ion-item>
<ion-item>
<ion-label>3 tails</ion-label>
<ion-radio id="threeTail" value="threetail"></ion-radio>
</ion-item>
</ion-list>
</div>
</div>
<div class="accordion-content-wrapper">
<h4 class="accordion-toggle dormantState" (click)="toggleIconSense()">Sensitivity <ion-icon [name]="buttonIconSense"></ion-icon></h4>
<div class="accordion-content">
<p>How sensitive is the animal?</p>
<ion-list radio-group [(ngModel)]="sensitive" id="sensitivity">
<ion-item>
<ion-label>All Types</ion-label>
<ion-radio id="all" value="" checked></ion-radio>
</ion-item>
<ion-item>
<ion-label>Very Tolerant</ion-label>
<ion-radio id="veryTol" value="veryTol"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Tolerant</ion-label>
<ion-radio id="tolerant" value="tolerant"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Sensitive</ion-label>
<ion-radio id="sensitive" value="sensitive"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Very Sensitive</ion-label>
<ion-radio id="verySens" value="verySens"></ion-radio>
</ion-item>
</ion-list>
</div>
</div>
</div>
<hr />
<button ion-button full color="danger" icon-left (click)="resetFilter()">
<ion-icon name="refresh-circle"></ion-icon>Reset Filters
</button>
</ion-col>
<ion-col style="background: white;" id="galleryDisplay">
<ion-grid>
<ion-row>
<div *ngFor="let macro of allMacros">
<ion-col col-12 (click)="goToMacroDetailsPage(macro)" class="item filter-item" *ngIf="(size == macro.filter_size || !size) && (shell == macro.filter_shell || !shell) && (legs == macro.filter_legs || !legs) && (tail == macro.filter_tail || !tail) && (sensitive == macro.filter_sensitivity || !sensitive)">
<ion-card>
<img src="./assets/imgs/thumbs/{{macro.thumbnail}}.jpg" />
<ion-card-content>
<ion-card-title>
{{macro.title}}
</ion-card-title>
</ion-card-content>
</ion-card>
</ion-col>
</div>
</ion-row>
</ion-grid>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
和SCSS文件：
page-filter {
.content {
height: 100%;
.grid {
#galleryDisplay {
.grid {
height: 100%;
overflow: scroll;
border: 1px solid pink;
position: absolute;
}
.item {
width: 135px;
height: 165px;
background: #eee;
margin: 3px;
display: inline-flex;
}
.card-content {
padding: 10px;
}
.card-title {
font-size: 1.2rem;
font-weight: 500;
padding: 0;
}
.card {
margin: 3px;
width: 100%;
}
.filter-item {
animation: fadeInUp 0.6s;
}
}
#sortingFilters {
//overflow: hidden;
padding: 1em;
height: 700px;
h2 {
color: #342392;
margin-top:0;
}
.accordion-content-wrapper {
border: 1px #488aff solid;
border-radius: 10px;
margin-bottom: 5px;
h4.accordion-toggle {
cursor: pointer;
color: #488aff;
padding: 8px;
margin-bottom: 0;
margin-top: 2px;
.icon {
float: right;
}
}
.accordion-content {
display: none;
padding: 5px;
p {
padding: 0px 5px;
}
}
.accordion-content.default {
display: block;
}
ul {
list-style-type: none;
}
}
}
}
}
}
}
答案 0 :(得分：0)
使用一些javascript修复了这个问题（不情愿）：
var appHeaderHeight = $(".tabbar").css("top");
appHeaderHeight = parseInt(appHeaderHeight, 10);
var menuBarHeight = $(".tabbar").height();
var deviceHeight = $(window).height();
var galleryHeight = deviceHeight - appHeaderHeight - menuBarHeight;
$("#galleryDisplay").css("height", galleryHeight);
基本上在on.ready()处理程序中触发以获取元素和屏幕的各种高度并进行一些计算，然后设置显示列的高度。
不是最优雅的解决方案，但完成了工作。