Question

我正在尝试做一个看似简单的网页布局，但我正在打一堵墙。

我喜欢做所有纯粹用CSS （没有表格来搞砸事情，没有javascript 动态调整大小的事情）

我想：

高度固定的航向
高度固定的页脚
左侧边栏，宽度固定
具有固定宽度的右侧边栏
整个布局始终填充整个视口（即，如果用户调整窗口大小，布局会增大到新的大小）

换句话说：


|<                Total width is 100% of viewport             >|

+--------------------------------------------------------------+  ---
|                 Header with a fixed height                   |   ^
|--------+-------------------------------------------+---------+    
|        |                                           |         |    
|        |                                           |         |    
|  Left  |                                           |  Right  | Total
|  with  |        Center grows in height/width       |  with   | height
|  fixed |      and has scrollbars if necessary      |  fixed  | is
|  width |                                           |  width  | 100%
|        |                                           |         | of
|        |                                           |         | viewport
|        |                                           |         |  
|--------+-------------------------------------------+---------|   
|                 Footer with a fixed height                   |   v
+--------------------------------------------------------------+  ---

给我带来最大麻烦的部分是

侧边栏和中心的高度等于视口的高度减去页眉和页脚的高度
中心的宽度等于视口的宽度减去两个侧边栏的宽度

我没有问题要求用户拥有现代浏览器。

我知道之前已经提出类似的问题，例如

使div填充剩余空间（http://stackoverflow.com/questions/1717564）
三行无表格CSS布局，中间行填充剩余空间（http://stackoverflow.com/questions/1703455）
创建2个div，其中一个占用剩余空间（http://stackoverflow.com/questions/1717564）

......结论似乎是没有一个好的解决方案。那些答案有些陈旧，所以我希望有人知道这个诀窍。

是的，我知道使用<table>完成此操作似乎微不足道，在“撞墙后”之后，我确实尝试使用表格来实现布局。不幸的是，通过这种方法，当内容变得太大时，我无法让中心部分显示滚动条（使用overflow: auto）。）

Answer 1

THIS怎么样？它适用于konqueror（KHTML），chrome（webkit）和firefox（gecko）。就像最近的任何事情一样，它可能会在IE6下bar。

    <html><body style="margin: 0; padding: 0;">
    <div style="position: absolute; background: #faa; 
                height: 100px; top: 0px; width: 100%;">header</div>
    <div style="position: absolute; background: #afa; 
                top: 100px; bottom: 100px; left: 0; width: 100px;">left</div>
    <div style="position: absolute; background: #afa; 
                top: 100px; bottom: 100px; right: 0; width: 100px;">right</div>
    <div style="position: absolute; background: #faa; 
                height: 100px; bottom: 0px; width: 100%;">footer</div>
    <div style="position: absolute; background: #aaf; 
                bottom:100px; left: 100px;top: 100px;right: 100px; overflow: auto;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt tempor
 velit quis volutpat. Nulla pharetra pulvinar arcu sed lacinia. Nulla ultrices aliquet sem, 
vitae commodo elit condimentum ut. Nulla consectetur facilisis nibh, et tempus purus 
pellentesque nec. Ut eu nibh ut arcu mattis luctus. Cras at interdum quam. Pellentesque 
imperdiet mi vitae felis sollicitudin iaculis. Maecenas accumsan tortor neque, at posuere 
felis. Quisque ultricies mi quis dolor pellentesque elementum. Maecenas quis nunc tortor. 
Cras eu velit faucibus nulla volutpat mollis. Aliquam fermentum lobortis diam ut pharetra. 
Duis mattis posuere fringilla. Morbi consectetur mauris vel libero pellentesque varius. 
Aenean leo enim, placerat a feugiat nec, ultrices et nulla. Etiam tincidunt urna id justo 
molestie faucibus. Cras neque enim, semper et sodales eu, volutpat nec urna. Vestibulum 
interdum arcu et ante egestas ut lacinia dui semper. Cras ligula lacus, aliquet nec dapibus 
ac, commodo vitae libero. In gravida venenatis sapien a convallis.</p>


    <p>Nulla ac risus eu velit pulvinar pretium. Etiam porttitor viverra sollicitudin. 
Donec lectus mi, posuere quis luctus facilisis, lacinia non ante. Sed sed mi neque. Etiam 
neque risus, bibendum et tincidunt vel, pharetra nec risus. In hac habitasse platea 
dictumst. Nam sollicitudin condimentum lorem, quis dignissim turpis sagittis nec. 
Pellentesque diam nunc, rhoncus quis lobortis id, lacinia quis lorem. Maecenas tempor metus 
nec velit facilisis in rhoncus lectus varius. Integer mollis, odio ut pharetra varius, elit 
nulla pellentesque neque, a egestas est justo dapibus neque. Vivamus a mauris massa, sit 
amet commodo orci. Aliquam nec iaculis sapien. Suspendisse ornare, tortor eget mattis 
tempus, nulla ligula fermentum elit, vitae euismod odio metus ac risus. Etiam iaculis 
dignissim consectetur. Nunc molestie lorem ac neque pulvinar vitae eleifend justo 
facilisis.</p>

    <p>Duis a sem turpis, et cursus arcu. Suspendisse potenti. Sed eu risus orci, eget 
bibendum justo. Praesent dapibus porttitor mauris, ac sollicitudin eros pretium quis. 
Curabitur mi eros, aliquam et ultrices et, adipiscing ut mauris. Nunc pretium malesuada nisi 
laoreet consectetur. Phasellus mi arcu, rutrum in blandit in, consectetur non risus. 
Vestibulum enim lacus, aliquam eu ultrices a, tempor ut turpis. Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Curabitur rhoncus faucibus sapien, quis vulputate eros tempus 
consequat. Vivamus id metus massa. Vivamus aliquet enim quis sem viverra eu molestie elit 
cursus.</p>

    <p>Mauris at lorem massa. Aliquam risus ligula, vestibulum et placerat condimentum, 
pellentesque sit amet justo. Cras tempor sollicitudin ultrices. Aliquam sed elit sapien. 
Praesent consectetur molestie vehicula. Pellentesque quis lectus et nunc accumsan feugiat. 
Ut rhoncus aliquet libero sed rhoncus. Fusce egestas nunc eu elit vestibulum placerat. Class 
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
Phasellus vitae nisi ante, id fermentum justo.</p>

    <p>Donec iaculis magna nec elit fringilla imperdiet. Proin mauris sem, pellentesque sed 
ultrices ac, luctus ac elit. Donec blandit, orci ac volutpat luctus, turpis sem malesuada 
tellus, eget porta magna nisi vitae quam. In vitae scelerisque urna. Proin ante odio, 
ultrices lobortis scelerisque at, dictum non justo. Pellentesque tincidunt congue leo 
malesuada ullamcorper. Quisque dapibus, massa dignissim gravida blandit, augue felis 
vehicula urna, et ullamcorper turpis orci sit amet nibh. Ut vitae consequat nibh. 
Pellentesque turpis justo, ultrices ac porta in, pretium quis quam. Donec purus nisi, 
dignissim vitae hendrerit vel, hendrerit ac sapien. Fusce facilisis purus a libero elementum 
ultrices. Nunc in libero congue ipsum tempor suscipit. Pellentesque pharetra pretium 
volutpat. Nam sapien arcu, viverra vitae euismod sit amet, mollis nec arcu. Phasellus at 
elit metus, sit amet tempus turpis. Phasellus mattis justo ut est varius facilisis ut et 
leo. Phasellus congue cursus est eget luctus. In eleifend diam at enim ultricies a lacinia 
mauris molestie. Nunc porttitor bibendum vulputate. Pellentesque quis risus vel mi 
pellentesque imperdiet vitae ac nunc.</p>

    </div>
    </body></html>

Answer 2

我认为尝试做这件事有点奇怪。然而，我对它进行了一次拍摄，我可能只得到了你所能得到的，但也许我使用了一种可能有用的不同方法。我很想知道Rob是否有更好的方法。我的方法有效，有一个问题：内容是可滚动的，但你看不到滚动条。我似乎无法想出解决这个问题的方法。无论如何，这是我想出的： http://www.happyspork.com/layout_test.html

Answer 3

如果有兴趣的话，我开发了一个使用css模仿动态table行为的布局[使用div s]。它适用于Chrome，Firefox和IE＆gt; 7.

DEMO，继续调整窗口大小

现在，所有五个组件都会按其各自的内容增长，但是，如果您确实需要修改左侧和右侧，只需将width规则应用于.east和.west。

拥有fiddle。

<强>代码：

<div class="view" style="height:100%; width:100%">
    <div class="north">
        n
    </div>

    <div class="middle">
        <div class="west">
            w
        </div>

        <div class="centre">
            c
        </div>

        <div class="east">
            e
        </div>
    </div>

    <div class="south">
        s
    </div>
</div>

html, body {
    height : 100%;
    margin : 0;
}

.view,
.view > .middle {
    display : table;
}

.view > .north,
.view > .south {
    height : 1px;
    display : table-row;
}
.view > .north { vertical-align : top; }
.view > .south { vertical-align : bottom; }

.view > .middle > div {
    display : table-cell;
}
.view > .west,
.view > .east {
    width : 1px;
}

/*div { border : 1px solid black; }*/

简单标记，无JS和动态布局。取消注释border css行以查看最新情况在你的问题的底部，我看到你尝试使用表但有问题。在max-height或centre上放置middle可能就是您想要的（对于滚动条）。也许这可以帮到你。

填充可用空间的CSS布局

3 个答案: