3列布局

3列布局 - 100％高度侧栏，自动高度容器，没有人造柱(3 column layout - 100% height sidebars, auto height container with no faux columns)

一个常见的问题，我确定但有一点点扭曲。

通常我只使用人造柱并且没有问题，但我目前正在创建的设计是三列，但如果右列或左列不存在，则中心列应填充其宽度。

有关此解决方案的文章的任何想法或链接？ 我已经看到了很多，但没有相同的情况。

任何帮助深表感谢。

A common problem I'm sure but with a slight twist.

Normally I'd just use faux columns and have no issues, but the design I'm currently creating is three columns, but if the right or left column is not there, the center column should fill their width.

Any ideas or links to articles on solutions for this? I've seen a lot but nothing with quite the same situation.

Any help is much appreciated.

最满意答案

不完全确定你的目标是什么css结构。 固定宽度列的两侧（高度：100％）和中间的可变宽度/高度内容？

body {padding-left:ABCpx; padding-right:ABCpx; margin:0 auto;} #columnLeft {height:100%; width:ABCpx; position:fixed; left:0; top:0} #columnRight {height:100%; width:ABCpx; position:fixed; right:0; top:0}

Not entirely sure what css structure you're aiming for. Fixed-width columns either side (height:100%), and variable-width/height content in the middle?

body {padding-left:ABCpx; padding-right:ABCpx; margin:0 auto;} #columnLeft {height:100%; width:ABCpx; position:fixed; left:0; top:0} #columnRight {height:100%; width:ABCpx; position:fixed; right:0; top:0}