全高度CSS布局，包含多个列 [英] Full-height CSS layout, with multiple columns

问题描述

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

这是以不良ASCII艺术格式的所需布局：

  _____________________ _ 
 | | long | logo | | 
 | |内容| | | 
 | | | | | 
 | | | | | 
 | grad | | grad | |视口
 | | | | | 
 | | | | | 
 | | | | _ | 
 | | | | 
 | | | | 
 _____________________ 
 
 | 2em | < -20em-> 2em | 
  

..或具有短内容..

  _____________________ _ 
 | |短|标志| | 
 | |内容| | | 
 | | | | | 
 | | | | | 
 | grad | | grad | |视口
 | | | | | 
 | | | | | 
 | | | | | 
 | | | | | 
 _____________________ _ | 
  

基本上看起来像一个单独的列，左上方是一个标志。当内容较短时，它仍然是全高度。

我已尝试使用

解决方案

由于你的渐变在左右分开，你需要实现 faux columns 。

如果您是弹性版本，请查看 弹性假列 和 多栏布局升级为箱外 。 p>

I have a layout that is working, but it has one very annoying problem.. when the content is taller than the screen, the background stops.

This is the desired layout in bad-ASCII-art format:

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

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

..or with short content..

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

Basically it looks like a single column, with a glow as a column either side. Over the left-glow is a logo. When the content is short, it is still the full-height.

I have tried using the CSS min-height hack, which fixes the middle column, but then the gradients only extend as far as the content (in the left column, a single  , in the right column the logo)

---

Here is what the layout looks like:

And the problem (when the browser window is shrunk vertically):

Finally, the problem HTML/CSS, http://data.dbrweb.co.uk/tmp/fifestock_layout_problem/

解决方案

Given that you have your gradients in seperate columns to the left and right, you need to implement "faux columns".

If you're after elastic versions, have a look at Elastic Faux Columns and Multi-Column Layouts Climb Out of the Box.

这篇关于全高度CSS布局，包含多个列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！