全高CSS布局,包含多列

Question

我有一个工作的布局,但它有一个非常恼人的问题..当内容比屏幕高时,背景停止.

这是bad-ASCII-art格式的理想布局:

_____________________  _
|    | long    |logo|   |
|    | content |    |   |
|    |         |    |   |
|    |         |    |   |
|grad|         |grad|   | Viewport
|    |         |    |   |
|    |         |    |   |
|    |         |    |  _|
|    |         |    |
|    |         |    |
_____________________

|2em| <-20em->| 2em|

..或内容短...

_____________________  _
|    | short   |logo|   |
|    | content |    |   |
|    |         |    |   |
|    |         |    |   |
|grad|         |grad|   | Viewport
|    |         |    |   |
|    |         |    |   |
|    |         |    |   |
|    |         |    |   |
_____________________  _|

基本上它看起来像一个单独的列,任何一侧都有一个发光列.在左边发光是一个标志.当内容很短时,它仍然是全高.

我已经尝试使用CSS min-height hack来修复中间列,但是渐变只延伸到内容(在左列中,单个 ,在右列中标识)

---

这是布局的样子:

问题(当浏览器窗口垂直收缩时):

最后,问题HTML/CSS,http://data.dbrweb.co.uk/tmp/fifestock_layout_problem/

Answer 1

假设你的左边和右边是单独的渐变列,你需要实现" 假列 ".

如果您正在使用弹性版本,请查看Elastic Faux Columns和Multi-Column Layouts Climb Out of the Box.