Html 使用百分比高度时的引导模式页脚定位

我有一个引导模式，它水平和垂直居中，有一个百分比高度（窗口高度的90%）。当模式内容垂直溢出时，页脚位于正确的位置。当内容少于模式高度时，页脚太高。参见图

我的解决办法是：

.modal-footer {
   position: absolute;
    bottom: 0;
    width: 100%;
}

起初它看起来很完美，但后来我注意到，当调整页面高度时，页脚的边框不在页脚的顶部。我把它涂成红色，这样你就可以很容易地看到：

那么，将页脚保持在模型底部的最佳方法是什么？像我这样的绝对位置？如果是这种情况，那么如何修复页脚高于边框的问题？还是有比位置更好的方法：绝对

因为它是我的复制品

以下是我的全部代码：

css

html

&时代；
情态标题
Lorem ipsum dolor sit amet，是一位杰出的献身者。Pellentesque级别的车辆。前庭的位子很小，我的时间很温和。悬钩子。你的生命是永恒的，你的生命是巨大的。多内克·洛博蒂斯、维韦拉大学的sem ac pretium viverra、利奥·尼索·康斯库、阿梅特·乌拉姆科珀大学的turpis ac erat。在rutrum auctor ligula，quis mattis enim lacinia eu。阿利奎姆在拉奥里特·亚库利斯的大教堂里。不必担心，nec将继续使用nisi

阿梅特·波特提托·麦格纳（amet porttitor magna），拍卖人费吉亚·泰勒斯（feugiat tellus）。维尼那提龟、厄洛斯·普尔维纳尔和佩伦茨克·亨德雷特·迪亚姆·奎斯和尤伊斯莫·廷西登。我坐在阿梅特·莫里斯·伊普苏姆旁边。大地电磁的整数。在tincidunt mi quis nunc sollicitudin的孕妇中。在欧盟麦格纳的一次会议上

这是一个封建主义者。多奈克便利店、威尼斯权杖店、猫咪餐厅、欧式舌苔餐厅。多奈克·亚库利斯·森佩尔元素。这是一个巨大的挑战。Morbi porttitor是一名非麦格纳·乌兰科珀·朗卡斯家族成员。Phasellus坐在turpis pharetra luctus massa的amet nunc。奥迪奥·福西布斯·埃利芬德的卢克图斯·马萨

在埃吉特·洛博蒂斯·利奥（eget lobortis leo），卢克图斯·奥迪奥（ut luctus odio）。毛里斯·法雷特拉·埃拉特·泰勒斯·亨德雷特·森佩尔。这是我在亨德雷特·鲁特鲁姆之前写的。多奈克·维塔乌拉姆科珀·阿库。阿利夸姆·佩伦茨克·福西布斯·普莱斯特拉特。阿利奎姆·埃拉特·帕特。在天庭上坐着一只箭舌。佩伦茨克·维利特·夸姆，亨德雷特·埃拉特·阿拉特·阿拉特·阿拉特·阿拉特·阿拉特·阿拉特·阿拉特·阿拉特·阿拉特·阿拉特·阿拉特·阿拉特·阿拉特·阿拉特·阿拉特·阿拉。这是我的荣幸

克拉斯·佩伦茨克·乌尔纳·利奥·埃格斯塔斯，在乌拉姆科珀·奥古斯·苏西比特。大白斑病，非白斑病。请给我一个地方，奥古斯，埃吉特·埃利芬德·普鲁斯。有尊严的人，有权利的人，有权利的人，有权利的人，有权利的人。在mattis lectus dolor中，我是Venetatis lectus pellentesque。这是一种尊严的象征。自由权杖的权杖。杜伊斯·奥古斯（Duis orci augue）、朗卡斯·埃吉特·法雷特拉（rhoncus eget pharetra ac）、维韦拉（viverra nec magna）。在accumsan nulla ac suscipit pellentesque中。在ultricies urna hendrerit a。水曲柳。非萨吉提斯之家酒店

Lorem ipsum dolor sit amet，是一位杰出的献身者。Pellentesque级别的车辆。前庭的位子很小，我的时间很温和。悬钩子。你的生命是永恒的，你的生命是巨大的。多内克·洛博蒂斯、维韦拉大学的sem ac pretium viverra、利奥·尼索·康斯库、阿梅特·乌拉姆科珀大学的turpis ac erat。在rutrum auctor ligula，quis mattis enim lacinia eu。阿利奎姆在拉奥里特·亚库利斯的大教堂里。不必担心，nec将继续使用nisi

阿梅特·波特提托·麦格纳（amet porttitor magna），拍卖人费吉亚·泰勒斯（feugiat tellus）。维尼那提龟、厄洛斯·普尔维纳尔和佩伦茨克·亨德雷特·迪亚姆·奎斯和尤伊斯莫·廷西登。我坐在阿梅特·莫里斯·伊普苏姆旁边。大地电磁的整数。在tincidunt mi quis nunc sollicitudin的孕妇中。在欧盟麦格纳的一次会议上

这是一个封建主义者。多奈克便利店、威尼斯权杖店、猫咪餐厅、欧式舌苔餐厅。多奈克·亚库利斯·森佩尔元素。这是一个巨大的挑战。Morbi porttitor是一名非麦格纳·乌兰科珀·朗卡斯家族成员。Phasellus坐在turpis pharetra luctus massa的amet nunc。奥迪奥·福西布斯·埃利芬德的卢克图斯·马萨

在埃吉特·洛博蒂斯·利奥（eget lobortis leo），卢克图斯·奥迪奥（ut luctus odio）。毛里斯·法雷特拉·埃拉特·泰勒斯·亨德雷特·森佩尔。这是我在亨德雷特·鲁特鲁姆之前写的。多奈克·维塔乌拉姆科珀·阿库。阿利夸姆·佩伦茨克·福西布斯·普莱斯特拉特。阿利奎姆·埃拉特·帕特。在天庭上坐着一只箭舌。佩伦茨克·维利特·夸姆，亨德雷特·埃拉特·阿拉特·阿拉特·阿拉特·阿拉特·阿拉特·阿拉特·阿拉特·阿拉特·阿拉特·阿拉特·阿拉特·阿拉特·阿拉特·阿拉特·。这是我的荣幸

克拉斯·佩伦茨克·乌尔纳·利奥·埃格斯塔斯，在乌拉姆科珀·奥古斯·苏西比特。大白斑病，非白斑病。请给我一个地方，奥古斯，埃吉特·埃利芬德·普鲁斯。有尊严的人，有权利的人，有权利的人，有权利的人，有权利的人。在mattis lectus dolor中，我是Venetatis lectus pellentesque。这是一种尊严的象征。自由权杖的权杖。杜伊斯·奥古斯（Duis orci augue）、朗卡斯·埃吉特·法雷特拉（rhoncus eget pharetra ac）、维韦拉（viverra nec magna）。在accumsan nulla ac suscipit pellentesque中。在ultricies urna hendrerit a。水曲柳。非萨吉提斯之家酒店

接近
救张
.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 95%;
        margin-left: auto;
    margin-right: auto;
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
}
.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    height: 90%;
    /* To center horizontally */
    margin: auto;
box-shadow:  0 8px 16px rgba(0, 0, 0, 0.25);
border: 1px solid rgba(0, 0, 0, 0.1);
background: rgba(255, 255, 255, 0.76);
}

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

.modal-footer {
   position: absolute;
    bottom: 0;
    width: 100%;
}

    <div id="myModal" class="modal fade" id="result-details-modal">
            <div class="vertical-alignment-helper">
    <div class="modal-dialog vertical-align-center">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel vehicula erat. Phasellus vestibulum leo eu mi tempor blandit. Suspendisse eget iaculis lectus. Donec vitae tempus enim, quis tristique magna. Donec lobortis, sem ac pretium viverra, leo nisl consequat arcu, sit amet ullamcorper nunc turpis ac erat. In rutrum auctor ligula, quis mattis enim lacinia eu. Aliquam at magna a erat laoreet iaculis quis a justo. Donec porttitor vulputate massa, nec suscipit nisi mollis sed.</p>
                <p>Praesent sit amet porttitor magna, auctor feugiat tellus. Sed venenatis tortor turpis, vel vestibulum eros pulvinar et. Pellentesque hendrerit diam quis dui euismod tincidunt. Sed sit amet mauris ipsum. Integer in magna tellus. In tincidunt mi quis nunc gravida sollicitudin. Aliquam ac dui eget erat consequat volutpat in eu magna.</p>
                <p>Sed feugiat bibendum leo consequat convallis. Donec facilisis, turpis a scelerisque venenatis, felis diam dictum tortor, vitae imperdiet tortor ligula eu lectus. Donec iaculis semper elementum. Nullam dapibus porttitor magna quis convallis. Morbi porttitor quam non magna ullamcorper rhoncus. Phasellus sit amet nunc at turpis pharetra luctus a a massa. Praesent luctus massa in odio faucibus eleifend.</p>
                <p>In eget lobortis leo, ut luctus odio. Mauris pharetra erat ac tellus hendrerit semper. Cras faucibus ipsum id ante hendrerit rutrum. Donec vitae ullamcorper arcu. Aliquam pellentesque faucibus placerat. Aliquam erat volutpat. In tincidunt metus sit amet ligula sagittis vehicula. Pellentesque velit quam, hendrerit a erat ac, fermentum tincidunt enim. Cras suscipit justo nec consectetur lacinia.</p>
                <p>Cras pellentesque urna a leo egestas, at ullamcorper augue suscipit. Nulla id lacinia magna, non iaculis est. Praesent a placerat augue, eget eleifend purus. Aenean dignissim, orci et rutrum facilisis, tellus massa porta nulla, quis hendrerit dui ipsum vitae urna. In mattis lectus dolor, id venenatis lectus pellentesque at. Suspendisse posuere metus vel bibendum dignissim. Fusce interdum magna id libero scelerisque suscipit. Duis orci augue, rhoncus eget pharetra ac, viverra nec magna. In accumsan nulla ac suscipit pellentesque. Nulla iaculis luctus tellus, at ultricies urna hendrerit a. Aenean vehicula sodales varius. Duis sodales hendrerit odio non sagittis.</p>
                                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel vehicula erat. Phasellus vestibulum leo eu mi tempor blandit. Suspendisse eget iaculis lectus. Donec vitae tempus enim, quis tristique magna. Donec lobortis, sem ac pretium viverra, leo nisl consequat arcu, sit amet ullamcorper nunc turpis ac erat. In rutrum auctor ligula, quis mattis enim lacinia eu. Aliquam at magna a erat laoreet iaculis quis a justo. Donec porttitor vulputate massa, nec suscipit nisi mollis sed.</p>
                <p>Praesent sit amet porttitor magna, auctor feugiat tellus. Sed venenatis tortor turpis, vel vestibulum eros pulvinar et. Pellentesque hendrerit diam quis dui euismod tincidunt. Sed sit amet mauris ipsum. Integer in magna tellus. In tincidunt mi quis nunc gravida sollicitudin. Aliquam ac dui eget erat consequat volutpat in eu magna.</p>
                <p>Sed feugiat bibendum leo consequat convallis. Donec facilisis, turpis a scelerisque venenatis, felis diam dictum tortor, vitae imperdiet tortor ligula eu lectus. Donec iaculis semper elementum. Nullam dapibus porttitor magna quis convallis. Morbi porttitor quam non magna ullamcorper rhoncus. Phasellus sit amet nunc at turpis pharetra luctus a a massa. Praesent luctus massa in odio faucibus eleifend.</p>
                <p>In eget lobortis leo, ut luctus odio. Mauris pharetra erat ac tellus hendrerit semper. Cras faucibus ipsum id ante hendrerit rutrum. Donec vitae ullamcorper arcu. Aliquam pellentesque faucibus placerat. Aliquam erat volutpat. In tincidunt metus sit amet ligula sagittis vehicula. Pellentesque velit quam, hendrerit a erat ac, fermentum tincidunt enim. Cras suscipit justo nec consectetur lacinia.</p>
                <p>Cras pellentesque urna a leo egestas, at ullamcorper augue suscipit. Nulla id lacinia magna, non iaculis est. Praesent a placerat augue, eget eleifend purus. Aenean dignissim, orci et rutrum facilisis, tellus massa porta nulla, quis hendrerit dui ipsum vitae urna. In mattis lectus dolor, id venenatis lectus pellentesque at. Suspendisse posuere metus vel bibendum dignissim. Fusce interdum magna id libero scelerisque suscipit. Duis orci augue, rhoncus eget pharetra ac, viverra nec magna. In accumsan nulla ac suscipit pellentesque. Nulla iaculis luctus tellus, at ultricies urna hendrerit a. Aenean vehicula sodales varius. Duis sodales hendrerit odio non sagittis.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
        </div>
</div>

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
    height:100%;
}