如何使用滚动内容制作固定页脚模式？
Posted
技术标签:
【中文标题】如何使用滚动内容制作固定页脚模式？【英文标题】：How to make a fixed footer modal with scrolling content? 【发布时间】：2021-11-20 06:51:25 【问题描述】：我在我的 Angular 应用程序中使用 bootstrap 4.6，我有一个在移动设备上变成全屏的模式，在这里我将添加一个带有滚动正文内容的固定页脚。
我尝试将modal-content高度设置为100%，将页脚高度的边距设置为modal-body，但我仍然无法实现页脚后面的内容滚动...
这是它的样子：
带有 Quantità 和其他内容的部分是页脚，这是我的模式代码：
.modal-body
padding: 0;
.modal-footer
padding: 0;
margin-bottom: 1.5rem;
@media (max-width: 767.98px)
.modal-footer
position: absolute;
bottom: 0;
@mixin modal-fullscreen()
padding: 0 !important; // override inline padding-right added from js
.modal-dialog
width: 100%;
max-width: none;
height: 100%;
margin: 0;
.modal-content
height: 100%;
border: 0;
border-radius: 0;
.modal-body
overflow-y: auto;
@each $breakpoint in map-keys($grid-breakpoints)
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@include media-breakpoint-down($breakpoint)
.modal-fullscreen#$infix
@include modal-fullscreen();
.btn#$infix-block
display: block;
width: 100%;
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<ngb-modal-window role="dialog" tabindex="-1" aria-modal="true" class="d-block fade modal modal-fullscreen-sm show">
<div role="document" class="modal-dialog">
<div class="modal-content">
<app-modal-product-content _nghost-cio-c135="">
<div _ngcontent-cio-c135="" class="modal-header">
<div _ngcontent-cio-c135="">
<h4 _ngcontent-cio-c135="" class="modal-title text-truncate">CAFFE</h4>
</div><button _ngcontent-cio-c135="" type="button" aria-label="Close" class="close"><span _ngcontent-cio-c135="" aria-hidden="true">×</span></button></div>
<div _ngcontent-cio-c135="" class="modal-body">
<ngb-accordion _ngcontent-cio-c135="" role="tablist" class="accordion" ng-reflect-close-other-panels="true" ng-reflect-destroy-on-hide="false" ng-reflect-active-ids="panel-aggiunte" aria-multiselectable="false">
<!--container-->
<div class="card ng-star-inserted">
<div role="tab" class="card-header" id="panel-aggiunte-header"><button _ngcontent-cio-c135="" type="button" ngbpaneltoggle="" class="accordion-toggle ng-star-inserted" ng-reflect-ngb-panel-toggle="" aria-expanded="true" aria-controls="panel-aggiunte"><div _ngcontent-cio-c135="" ngbpaneltoggle="" class="aggiunte-title"><strong _ngcontent-cio-c135="" class="d-block mb-2">AGGIUNTE</strong><label _ngcontent-cio-c135="" class="d-block mb-0">Aggiungi ingredienti alla tua pietanza</label></div></button>
<!--bindings=
"ng-reflect-ng-template-outlet-context": "[object Object]"
-->
</div>
<div role="tabpanel" class="collapse show ng-star-inserted" id="panel-aggiunte" aria-labelledby="panel-aggiunte-header">
<div class="card-body">
<div _ngcontent-cio-c135="" class="aggiunte-container ng-star-inserted">
<div _ngcontent-cio-c135="" class="row">
<div _ngcontent-cio-c135="" class="col-12 col-sm-12 affiancato ng-star-inserted">
<div _ngcontent-cio-c135="" class="form-check"><label _ngcontent-cio-c135="" class="custom-constrol"><input _ngcontent-cio-c135="" type="checkbox" class="form-check-input"> BACON + 1,00 € </label></div>
<div _ngcontent-cio-c135="" class="d-block attributi"><span _ngcontent-cio-c135="" class="badge badge-success mr-2 ng-star-inserted" style="background-color: rgb(2, 128, 2);"> CON LIEVITO MADRE </span><span _ngcontent-cio-c135="" class="badge badge-success mr-2 ng-star-inserted" style="background-color: rgb(130, 128, 130);"> APROTEICO </span>
<span _ngcontent-cio-c135="" class="badge badge-success mr-2 ng-star-inserted" style="background-color: rgb(155, 204, 2);"> BIO </span>
<!--bindings=
"ng-reflect-ng-for-of": "[object Object],[object Object"
-->
</div>
</div>
<div _ngcontent-cio-c135="" class="col-12 col-sm-12 affiancato ng-star-inserted">
<div _ngcontent-cio-c135="" class="form-check"><label _ngcontent-cio-c135="" class="custom-constrol"><input _ngcontent-cio-c135="" type="checkbox" class="form-check-input"> OLIVE VERDI DENOCCIOLATE </label></div>
<div _ngcontent-cio-c135="" class="d-block attributi">
<!--bindings=
"ng-reflect-ng-for-of": ""
-->
</div>
</div>
<div _ngcontent-cio-c135="" class="col-12 col-sm-12 affiancato ng-star-inserted">
<div _ngcontent-cio-c135="" class="form-check"><label _ngcontent-cio-c135="" class="custom-constrol"><input _ngcontent-cio-c135="" type="checkbox" class="form-check-input"> POMODORACCI </label></div>
<div _ngcontent-cio-c135="" class="d-block attributi">
<!--bindings=
"ng-reflect-ng-for-of": ""
-->
</div>
</div>
<div _ngcontent-cio-c135="" class="col-12 col-sm-12 affiancato ng-star-inserted">
<div _ngcontent-cio-c135="" class="form-check"><label _ngcontent-cio-c135="" class="custom-constrol"><input _ngcontent-cio-c135="" type="checkbox" class="form-check-input"> Ghiaccio </label></div>
<div _ngcontent-cio-c135="" class="d-block attributi">
<!--bindings=
"ng-reflect-ng-for-of": ""
-->
</div>
</div>
<div _ngcontent-cio-c135="" class="col-12 col-sm-12 affiancato ng-star-inserted">
<div _ngcontent-cio-c135="" class="form-check"><label _ngcontent-cio-c135="" class="custom-constrol"><input _ngcontent-cio-c135="" type="checkbox" class="form-check-input"> PROSC. COTTO </label></div>
<div _ngcontent-cio-c135="" class="d-block attributi">
<!--bindings=
"ng-reflect-ng-for-of": ""
-->
</div>
</div>
<div _ngcontent-cio-c135="" class="col-12 col-sm-12 affiancato ng-star-inserted">
<div _ngcontent-cio-c135="" class="form-check"><label _ngcontent-cio-c135="" class="custom-constrol"><input _ngcontent-cio-c135="" type="checkbox" class="form-check-input"> Limone </label></div>
<div _ngcontent-cio-c135="" class="d-block attributi">
<!--bindings=
"ng-reflect-ng-for-of": ""
-->
</div>
</div>
<!--bindings=
"ng-reflect-ng-for-of": "[object Object],[object Object"
-->
</div>
</div>
<!--bindings=
"ng-reflect-ng-if": "0"
--><button _ngcontent-cio-c135="" type="button" class="btn btn-sm btn-outline-dark float-right mb-3 ng-star-inserted"> Step successivo </button>
<!--bindings=
"ng-reflect-ng-template-outlet": "[object Object]"
-->
</div>
</div>
<!--bindings=
"ng-reflect-ng-if": "true"
-->
</div>
<div class="card ng-star-inserted">
<div role="tab" class="card-header" id="panel-note-header"><button _ngcontent-cio-c135="" type="button" ngbpaneltoggle="" class="accordion-toggle ng-star-inserted collapsed" ng-reflect-ngb-panel-toggle="" aria-expanded="false" aria-controls="panel-note"><div _ngcontent-cio-c135="" ngbpaneltoggle="" class="aggiunte-title"><strong _ngcontent-cio-c135="" class="d-block mb-2">RICHIESTE</strong><label _ngcontent-cio-c135="" class="d-block mb-0">Aggiungi le tue richieste</label></div></button>
<!--bindings=
"ng-reflect-ng-template-outlet-context": "[object Object]"
-->
</div>
<div role="tabpanel" class="collapse ng-star-inserted" id="panel-note" aria-labelledby="panel-note-header">
<div class="card-body">
<div _ngcontent-cio-c135="" class="form-group w-100 ng-star-inserted"><label _ngcontent-cio-c135="">Note</label><textarea _ngcontent-cio-c135="" maxlength="250" class="form-control text-area-varianti ng-untouched ng-pristine ng-valid" ng-reflect-maxlength="250" ng-reflect-model=""></textarea></div>
<button _ngcontent-cio-c135="" type="button" class="btn btn-sm btn-outline-dark float-left mb-3 ng-star-inserted"> Step precedente </button>
<!--bindings=
"ng-reflect-ng-if": "6"
-->
<!--bindings=
"ng-reflect-ng-template-outlet": "[object Object]"
-->
</div>
</div>
<!--bindings=
"ng-reflect-ng-if": "true"
-->
</div>
<!--bindings=
"ng-reflect-ng-for-of": "[object Object]"
-->
</ngb-accordion>
</div>
<div _ngcontent-cio-c135="" class="modal-footer">
<div _ngcontent-cio-c135="" class="row w-100">
<div _ngcontent-cio-c135="" class="col-12 mb-3"><label _ngcontent-cio-c135="">Quantità</label>
<div _ngcontent-cio-c135="" class="input-group group-qta ml-md-auto">
<div _ngcontent-cio-c135="" class="input-group-prepend"><button _ngcontent-cio-c135="" class="btn btn-outline-dark" disabled=""> - </button></div><input _ngcontent-cio-c135="" type="number" disabled="" class="form-control qta">
<div _ngcontent-cio-c135="" class="input-group-append"><span _ngcontent-cio-c135="" class="input-group-text">pz</span><button _ngcontent-cio-c135="" class="btn btn-outline-dark"> + </button></div>
</div>
</div>
<div _ngcontent-cio-c135="" class="col-4 align-self-center">
<h5 _ngcontent-cio-c135="" class="font-weight-bold float-left my-auto"> 19,90 € </h5>
</div>
<div _ngcontent-cio-c135="" class="col-8"><button _ngcontent-cio-c135="" type="button" class="btn btn-sm btn-primary float-right"> Aggiungi al carrello </button></div>
</div>
</div>
</app-modal-product-content>
</div>
</div>
</ngb-modal-window>【问题讨论】：
【参考方案1】：给模态体一个固定的高度，使模态体可滚动。然后在其中添加您的内容。
例如：
.modal height: 100vh; width: 100%;
.modal-header height: 20vh;
.modal-footer height: 20vh;
.modal-body height: 60vh; overflow-y: auto
上面将给模态窗口高度（100vh），然后给页眉和页脚20vh高度，然后给模态体剩下的60vh。这使它完全包装。现在正文内的内容将可选地滚动。该填充为您提供粘性页脚和页眉。
【讨论】：
以上是关于如何使用滚动内容制作固定页脚模式？的主要内容，如果未能解决你的问题，请参考以下文章