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

问题描述

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

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

_____________________ _||长|标志||||内容 ||||||||||||||研究生||研究生||视口||||||||||||||_|||||||||_____________________|2em|<-20em->|2em|

..或内容简短..

_____________________ _||短|标志||||内容 ||||||||||||||研究生||研究生||视口||||||||||||||||||||_____________________ _|

基本上它看起来像一个单独的柱子，两边都有一个柱子.在左发光是一个标志.内容比较短的时候，还是全高.

我尝试使用

解决方案

鉴于你的渐变在左右单独的列中，你需要实现 "假列".

如果您使用弹性版本，请查看弹性假列 和 多列布局开箱即用.

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屋！