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

Question

我试图创建一个模式弹出窗口，如下所示：

页眉和页脚应该是50像素高，左侧栏通常不是一个问题。然而，主要因素有多大差异。

我试图让这个外观在许多屏幕上都具有响应性，因此我将外部容器设置为最大高度：70％。我希望主div可以独立滚动，这样页眉和页脚就会保留在原位。我希望弹出窗口不会占用超出需要的空间，并且可以在各种屏幕上查看。

我没有太多的运气 - 保持。不会向下扩展并强制关闭弹出窗口（并在父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/

我说这是因为你的代码仍然有＆＃34;隐藏＆＃34;课程以及＆＃34;模态＆＃34;和＆＃34;淡出＆＃34;类，在Bootstrap 3.x中不再需要，所以我怀疑你还在使用旧版本。

我现在碰巧和你的摔跤有类似的问题，所以当我把它整理好后，我会很高兴回来并分享我的解决方案。同时我建议升级！

干杯。