Question

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

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

1是面包屑导航器，宽度为100％。高度将在1（笔记本电脑）和3（手持小屏幕）线之间变化，因此最大高度：3em;会做。适合内容的最小高度。

2将包含HTML5或SWF虚拟全景图。有一个javascript加载器，它适合可用空间，所以我需要2填充所有可用空间后其他部分采取他们的。这就是我疯狂的麻烦 - 让它填满所有可用的垂直高度。当我设置高度：100％时会出现垂直滚动条，因为它不会从100％中取走1的高度。

3包含全景图的描述。一旦4占据其空间，它应该是大约20％宽度和所有可用高度。如果3的内容超过可以显示，则应出现垂直滚动条，因此溢出：auto;应该这样做。

4只包含几个标签，宽度与3和最大高度相同：3em;最小高度以适合内容。

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

这是我最接近的：http://codepen.io/anon/pen/LosJx

问题：

2未填充所有可用的垂直空间。
4也应始终可见。目前，如果您将窗口调整为小尺寸，它将被推出视图。
如果增加垂直窗口大小，您将看到4不会粘在屏幕底部。我想显示：固定;是我需要的，但是如果需要的话，如何让3显示滚动条？

HTML结构并不严格，可以添加或删除元素，但如果我不必偏离已经存在的东西那么会很好，因为我必须得到这个适合现有的页面。

我会继续努力，但非常感谢建议或模型！

2小时后更新

谢谢大家的回答！我会详细审核您的回复。

与此同时，我一直在努力，这就是我想出来的： http://codepen.io/anon/pen/aunbz 没有桌子，没有像素尺寸，一切都按需要工作，除了导航器没有跨越顶部的整个长度，因为我喜欢它。我尝试这样做的任何方法都导致了100％的高度＆＃34; 2＆＃34;不考虑它，所以会出现垂直滚动条。

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

Answer 1

您希望＃2的高度基于＃3和＃4的总和，同时100％高度的差异 - ＃1。你必须将它全部放入一个表中（或使用display：table和display：table-cell on divs）或使用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/怎么样？

我建议您永久地将标题赋予固定高度，例如50px。
将＃3和＃4放入带float:right的容器中，并始终显示position:fixed。

看似简单，几乎不可能（？）CSS布局 - 占用所有垂直空间

2 个答案: