Html 看似简单，实际上不可能（？）CSS布局-占据所有垂直空间

我已经尝试了三天来创建这个看似简单的CSS布局：

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

1是面包屑导航器，100%宽度。高度将在1（笔记本电脑）和3（带小屏幕的手持设备）行之间变化，因此最大高度：3em；行。适合内容的最小高度

2将包含HTML5或SWF虚拟全景。有一个javascript加载器可以将其装入可用空间，所以在其他部分占用它们的空间后，我需要2个加载器来填充所有可用空间。这就是我有疯狂的麻烦-让它填补所有可用的垂直高度。当我设置高度：100%时，它会使垂直滚动条出现，因为它不会从100%中去掉1的高度

3包含全景图的描述。它应该是大约20%的宽度和所有可用的高度，一旦4采取了它的空间。如果3的内容超出了可以显示的范围，则应显示垂直滚动条，因此溢出：自动；我应该这样做

4只包含几个标记，因此宽度与3相同，最大高度为3em；，适合内容的最小高度

如果可能的话，我想避免使用display:table，除非没有其他方法不让生活变得非常复杂。绝对没有像素单位

这是我最接近的一次：

问题：

• 2不能填充所有可用的垂直空间
• 4应该始终可见，即使3中有很多内容。当前，如果将窗口调整为较小的大小，它将被挤出视图
• 如果您增加垂直窗口的大小，您将看到4不粘在屏幕底部。我猜显示：固定；这是我需要的，但是如果需要的话，我怎么才能得到3来显示滚动条呢

HTML结构并不严格，可以添加或删除元素，但如果我不必偏离已经存在的内容太远，那就太好了，因为我必须让它适合现有页面

我会继续尝试，但会非常感谢建议或样机

---

2小时后更新

谢谢大家的回答！我将详细审查你的答复

在此期间，我一直在努力，这就是我想到的： 没有表格，没有像素尺寸，一切都可以根据需要工作，除了导航器没有像我希望的那样跨越顶部的整个长度。我试图让它这样做的任何方法都会导致“2”的100%高度没有考虑到它，因此会出现一个垂直滚动条

我还不知道这个解决方案的跨浏览器支持，我想CSS表方法在这方面是最安全的。

这个布局怎么样

我建议您永远给收割台一个固定的高度，例如50px

将#3和#4放入一个带有

float:right

的容器中，并始终可见

位置：fixed

您希望#2的高度基于#3和#4之和，同时基于100%高度的差-#1。您必须将其全部放入一个表中（或者在div上使用display:table和display:table单元格），或者使用javascript根据窗口高度调整div的大小

根据我的想法，我在这里使用div完成了一个嵌入式表格布局：

html{高度：100%；}
正文{高度：100%；边距：0px；}
div#topCell1{显示：表格单元格；背景色：蓝色；}
div#下半部分{高度：100%；}
div#left2{显示：表格单元格；背景色：红色；高度：100%；宽度：80%；}
div#rightCon{显示：表格单元格；高度：100%；宽度：20%；}
div#right3{显示：表格单元格；背景色：灰色；高度：100%；}
div#right3容器{高度：100%；宽度：100%；溢出：自动；}
div#right4{显示：表格单元格；背景色：黑色；}
div.table{显示：表格；高度：100%；宽度：100%；边框折叠：折叠；边框间距：0；}
div.tableRow{display:table row；}

您可以将#3和#4放入新的#5容器中，然后在#5容器中制作#4粘脚。查找CSS粘性页脚。这将解决你的第二个要点。不存在像显示：修复这样的东西。我想你的意思是位置：固定。这意味着即使你向下滚动页面，它也会保持在原来的位置，我不知道你是否想要这样，如果是这样，你应该将位置：固定到#3，因为#4在#3Oops之内，是的，我的意思是位置：固定

<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>