【发布时间】:2018-12-31 01:02:41
【问题描述】:
我有两个 div claims-side-panel 和 alert-section。我需要为claims-side-panel 添加position:fixed,以便它可以滚动移动。但是如果我添加position:fixed 那么它会干扰其他 div 的对齐,请检查我下面的代码
HTML
<div class="row">
<aside class="col-lg-4 mt-5">
<div class="claims-side-panel">
<ul>
<li>
<div class="claim-list-item">
<span class="fa" [ngClass]="{'image-icon': !claim.category.value }"
aria-hidden="true"></span>
</div>
</li>
</ng-container>
</ul>
</div>
<div class="alert-section">
<assisted-moment [assistData]="assistedMoment" sectionName="OtherRequirements"></assisted-moment>
</div>
</aside>
</div>
</div>
CSS
div.claims-main-wrapper {
.fa-spinner {
@include font-size(40px);
position: absolute;
margin: 60px auto;
left: 50%;
}
aside {
.claims-side-panel {
position: fixed; // here I am trying
ul {
padding-left: 0px;
list-style: none;
li {
.claim-list-item {
padding: 14px 28px;
background-color: $main-background-color;
border-bottom: 1px solid #e0e0e0;
line-height: 26px;
span {
&.label {
@include font-size(16px);
@include font-style($tertiaryFontFamily, 700);
color: $text-color;
}
p {
@include font-size(16px);
font-family: $primaryFontFamily;
color: $text-color5;
margin: -4px 0 0 28px;
word-break: break-word;
}
}
}
}
}
}
div.alert-section {
//padding-top: 2rem;
padding-top: 0;
.table thead th {
border-bottom: 1px solid $border-color;
}
.table th, .table td {
border-top: 0;
}
}
【问题讨论】:
-
请您使用呈现的 html 创建一个minimal reproducible example
标签: html css sass bootstrap-4