问题描述
我有一个可以工作的布局,但它有一个非常烦人的问题..当内容高于屏幕时,背景会停止.
这是不良 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 布局,多列的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!