动态内容的Bootstrap模态页脚高度

Question

对于我在模态中的表单，我选择使用bootstrap模式页脚来显示与表单相关的任何错误。当错误不可避免地使页脚占用的高度超过页脚可用时，这会引起一些挫折。我很好，它需要更多的高度，但我希望它增加顶部的高度，并减少模态体的高度，使模态作为一个整体保持相同的高度。如果它将它添加到底部，它最终会将内容从屏幕上推出。模态体考虑的内容太“高”并添加了垂直滚动条，这就是为什么我愿意放弃模态体高度来容纳模态页脚高度。

我添加了一个指向我所指的图像的链接。模态页脚按预期扩展到内容，但将高度添加到底部，以便模式页脚的其余部分在推离屏幕时变得无法访问。我想从身体上偷高度，所以页脚增加的高度被添加到顶部，模态的总高度保持相同的大小。

我确定有一个简单的解决方案我还没有找到，但我想我会问，而我继续看，以防其他人已经找到了他们想要分享的解决方案。任何帮助将非常感激。提前致谢。

Answer 1

通常bootstrap模态使用固定的positionong。如果内容是大型滚动条出现在模态内。

如果您希望长模态没有滚动条，则必须先将模态定位更改为absolute。但是，如果您的网站内容很长，则必须添加一些top属性值。这是因为现在模态垂直定位到整个站点，而不是当前浏览器视图，因此％top将不再起作用。

.modal {
    position: absolute;
    top: 100px;
}

现在滚动你只需使用浏览器滚动条。

接下来摆脱模态滚动条，将max-height: inherit添加到modal-body类。现在，modal会根据没有滚动条的内容而变大。

.modal .modal-body {
    max-height: inherit;
}

是的，这有一些缺点。最大的一个是，如果你在页面底部启动模态，你甚至可能看不到它，因为它会弹出页面顶部。 对于此问题，您可以在触发模式后添加js scroll top脚本。

$('#myModal').on('show', function () {
    $("body").animate({
        scrollTop:0
    });
});

希望有所帮助！