文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >如何制作带有滚动内容的固定页脚模式？

问如何制作带有滚动内容的固定页脚模式？
EN

Stack Overflow用户
提问于 2021-09-28 08:22:30
回答 1查看 234关注 0票数 1

我在我的Angular应用程序中使用bootstrap 4.6，我有一个在移动设备上变得全屏的模式，在这里我会添加一个带有滚动正文内容的固定页脚。

我已经尝试将modal-content高度设置为100%，将页脚高度的边距设置为modal-body，但我仍然无法实现内容在页脚后面滚动。

下面是它的外观：

​

​

Quantità和其他东西的部分是页脚，下面是我的模式代码：

​

代码语言：javascript
运行
复制
.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%;
    }
  }
}
代码语言：javascript
运行
复制
<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&nbsp;€ </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&nbsp;€ </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>

​

bootstrap-4
javascript
html
css
angular
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-09-28 09:23:30

为模态主体指定一个固定的高度，并使模态主体可滚动。然后在里面添加你的内容。

例如：

代码语言：javascript
运行
复制
.modal{ height: 100vh; width: 100%;}
.modal-header{ height: 20vh;}
.modal-footer{ height: 20vh;}
.modal-body{ height: 60vh; overflow-y: auto}

上面将为modal提供视窗高度(100vh)，然后将20vh高度提供给页眉和页脚，然后将剩余的60vh提供给modal主体。这使得它被填得满满的。现在，正文中的内容可以随意滚动。填充会给你提供粘性页脚和页眉。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/69358172

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档