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

我试图创造一个模式弹出看起来像下面这样： diagram 保持内部的div尊重页脚的响应模式

页眉和页脚应该是50个像素高，左边栏一般会不是一个问题。但是，主体的大小可能有很大的差异。

我试图让这种外观在许多屏幕上响应，所以我把外层容器设置为最大高度：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 }

来源

2014-03-14 Andrew Stirling

我建议不要使用模态对话框的手机;模态对话只是在有限的屏幕空间上浪费太多空间，尤其是像您的布局。相反，您可能想将其显示为不同的页面。 –

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

一个很好的指南，迁移到3.X可以在这里找到： http://getbootstrap.com/migration/

我之所以说这是因为你的代码仍然具有“隐藏”类与“模式”和“变脸”一起类，并且在Bootstrap 3.x中不再需要，所以我怀疑你仍然在使用旧版本。

我碰巧正在为您的胳膊摔跤而出现类似的问题，所以当我把它整理出来时，我会很乐意返回并分享我的解决方案。同时我建议升级！

干杯。

来源

2014-05-05 21:57:10

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

回答

相关问题