保持內部的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尊重頁腳的響應模式

回答

相關問題