看似簡單，幾乎不可能（？）的CSS布局-占用所有垂直空間

Question

我已經嘗試了三天來創建這種看似簡單的CSS布局：

___________________ |_________1________| | | | | | 3 | | 2 | | | |___| | | 4 | |______________|___|

1是一個面包屑導航器，寬度為100％。 高度將在1（筆記本電腦）行和3（小屏幕手持設備）行之間變化，因此max-height：3em； 會做。 符合內容的最小高度。

2將包含HTML5或SWF虛擬全景圖。 有一個javascript加載程序，可以將其裝入可用空間，因此在其他部分占用它們后，我需要2來填充所有可用空間。 這就是我遇到的瘋狂問題-要使其填滿所有可用的垂直高度。 當我將高度設置為100％時，它會顯示垂直滾動條，因為它不會從100％移除1的高度。

圖3包含對全景的描述。 一旦占用4個空間，它的寬度應為20％，所有可用高度都應為。 如果3的內容超出了可以顯示的范圍，則應顯示垂直滾動條，所以將溢出：auto; 應該這樣做。

4僅包含一些標簽，因此寬度與3相同，並且max-height：3em;最小高度適合內容。

如果可能的話，我想避免使用display：table，除非沒有其他方法會使生活變得非常復雜。 絕對沒有像素單位。

這是我最近得到的： http : //codepen.io/anon/pen/LosJx

問題：

• 2不會填充所有可用的垂直空間。
• 即使3中有很多內容，4也應該始終可見。如果將窗口調整為較小的大小，則4會被擠出視圖。
• 如果您增加垂直窗口的大小，您將看到4個不粘在屏幕底部。 我猜顯示：固定； 是我需要的，但是如果需要的話，如何獲得3以顯示滾動條呢？

HTML結構並不嚴格，可以添加或刪除元素，但是如果我不必與現有內容相差太遠，那將是很好的選擇，因為我必須先使它適合現有頁面。

我會繼續嘗試，但是非常感謝您的建議或樣機！

---

2小時后更新

謝謝大家的回答！ 我將詳細審查您的回復。

同時，我一直在嘗試，這就是我想出的方法： http : //codepen.io/anon/pen/aunbz沒有表格，沒有像素尺寸，一切都按需工作，只是導航器無法覆蓋整個范圍我想要的頂部的長度。 我嘗試這樣做的任何方法都導致100％的高度“ 2”沒有考慮在內，因此會出現垂直滾動條。

我還不知道該解決方案的跨瀏覽器支持，我認為CSS table方法在這方面是最安全的。

Answer 1

您希望＃2的高度基於＃3和＃4的總和，同時基於100％的高度差-＃1。 您將必須將其全部放入表格中（或在div上使用display：table和display：table-cell），或使用javascript根據窗口高度調整div的大小。

根據我想您想要的，我已經在這里使用div完成了嵌入式表的布局： http : //jsfiddle.net/3mX4r/

<style>
html{height:100%;}
body{height:100%;margin:0px;}
div#topCell1{display:table-cell;background-color:blue;}
div#bottomHalf{height:100%;}

div#left2{display:table-cell;background-color:red;height:100%;width:80%;}

div#rightCon{display:table-cell;height:100%;width:20%;}
div#right3{display:table-cell;background-color:gray;height:100%;}
div#right3Container{height:100%;width:100%;overflow:auto;}

div#right4{display:table-cell;background-color:black;}

div.table{display:table;height:100%;width:100%;border-collapse:collapse;border-spacing:0;}
div.tableRow{display:table-row;}
</style>

<div id="mainContainer" class="table">
    <div class="tableRow">
        <div id="topCell1">
            &nbsp;<br>
            &nbsp;<br>
        </div>
    </div>
    <div id="bottomHalf" class="tableRow">
        <div class="table">
            <div class="tableRow">
                <div id="left2">

                </div>
                <div id="rightCon">
                    <div class="table">            
                        <div class="tableRow">
                            <div id="right3">
                                <div id="right3Container">
                                    &nbsp;<br>
                                </div>
                            </div>
                        </div>
                        <div class="tableRow">
                            <div id="right4">
                                &nbsp;<br>
                                &nbsp;<br>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 2

這個布局http://karlwilhelm.bplaced.de/呢？

1. 我建議您將標題永遠設為固定高度，例如50px。
2. 將＃3和＃4放入帶有float:right的容器中，並且始終在position:fixed可見。