放置固定模态页眉和页脚答案

【问题标题】：Placing Fixed Modal Headers and Footers放置固定模态页眉和页脚
【发布时间】：2016-05-31 14:04:49
【问题描述】：

我正在使用 Bootstrap Modal 在我的网页上显示一些内容。我已将模态的高度设置为固定的 80%，以便在长屏幕中正常工作，因为模态正文中有很多内容。使用 80% 的高度，我希望将页眉和页脚固定在它们的位置，但整个内容似乎是可滚动的，即我的页眉或页脚继续滚动。我想将页眉和页脚固定在它们的位置上，并且模态体是可滚动的。我试过使用 position:absolute 和 position:fixed 但它似乎不起作用。如何做到这一点，即保持页眉和页脚与正文可滚动固定？

【问题讨论】：

请添加小提琴或分享一些代码。

标签： html css twitter-bootstrap bootstrap-modal

【解决方案1】：

您必须在其中设置 .modal-body 的高度并将其设置为 overflow-y: auto。还将 .modal-dialog 溢出值重置为初始值。

    .modal{
    display: block !important; /* I added this to see the modal, you don't need this */
}

/* Important part */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    height: 250px;
    overflow-y: auto;
}

【讨论】：

【解决方案2】：

尝试使用下面的 css 可能会对您有所帮助。

.modal-body {
    position: relative;
    padding: 15px;
    max-height: 600px !important;
    overflow-y: scroll;

}

【讨论】：