html - 在响应模式中保持内部 div 尊重页脚

Question

我正在尝试创建一个如下所示的模态弹出窗口:

页眉和页脚应该是 50 像素高，左边的栏通常不是问题。然而，main 的大小可能有很大差异。

我试图让它在许多屏幕上看起来都具有响应性，所以我将外部容器设置为 max-height: 70%。我希望主 div 可以独立滚动，以便页眉和页脚保持在原位。我希望弹出窗口不会占用比它需要更多的空间，并且可以在各种屏幕上查看。

我的运气不佳 - 在没有明确设置其高度的情况下阻止 .main 向下扩展并强制页脚离开弹出窗口(并在父 div 下方呈现)有点像噩梦。

我正在使用 Bootstrap 。下面是 CSS 和 HTML。

关于如何做到这一点的想法？

HTML:

<div class="expand_element modal fade hide in" style="max-height: 70%; display: block;" aria-hidden="false"><div class="modal-header"><a href="#" class="close" data-dismiss="modal">×</a><h3 style="font-size: initial;">Expanded view</h3></div>
    <div id="outer" style="overflow-x: hidden; position: relative">
    <div class="outer">
        <div class="middle">
            <div class="left"><h2>Description</h2></div>
            <div class="main">Main</div>
        </div>
    </div>
    <div class="footer">Footer</div>
</div></div></div>

风格:

.outer { width: 90%; }
.left { width: 100px; float: left; }
.middle { position: absolute; top: 0px; bottom: 42px; }
.main { max-height: 80%; overflow-y: auto; font-size: 10px }
.footer { height: 40px; bottom: 0px; position: absolute; padding: 4px; border-radius: 4px; font-size: 15px }

Answer 1

我要做的第一件事是更新到最新的 Bootstrap，版本 3.1.1。它内置了许多移动优先响应功能，您可以自定义下载以仅包含您计划使用的组件，此处:http://getbootstrap.com/customize .

此处提供了迁移到 3.x 的出色指南: http://getbootstrap.com/migration/

我这样说的原因是因为你的代码仍然有“隐藏”类以及“模态”和“淡入淡出”类，在 Bootstrap 3.x 中这不再是必需的，所以我怀疑你仍然使用旧版本。

我现在碰巧遇到了与您类似的问题，所以当我解决问题后，我很乐意返回并分享我的解决方案。同时我建议升级!

干杯。