我有一个可用的布局，但它有一个非常烦人的问题。当内容高于屏幕时，背景停止。
这是不良 ASCII 艺术格式的所需布局:
_____________________ _
| | long |logo| |
| | content | | |
| | | | |
| | | | |
|grad| |grad| | Viewport
| | | | |
| | | | |
| | | | _|
| | | |
| | | |
_____________________
|2em| <-20em->| 2em|
..或内容较短..
_____________________ _
| | short |logo| |
| | content | | |
| | | | |
| | | | |
|grad| |grad| | Viewport
| | | | |
| | | | |
| | | | |
| | | | |
_____________________ _|
基本上它看起来像一个单独的柱子，两边都有一个发光的柱子。在左边的发光是一个标志。当内容很短时，它仍然是全高。
我试过使用 CSS min-height hack ，它固定了中间的列，但是渐变只延伸到内容(在左列中，单个 ，在右列中的 Logo )
布局如下:
以及问题(当浏览器窗口垂直收缩时):
最后是HTML/CSS的问题，http://data.dbrweb.co.uk/tmp/fifestock_layout_problem/
最佳答案
鉴于您在左侧和右侧的不同列中有渐变，您需要实现“ faux columns ”。
如果您想要 flex 版本，请查看 Elastic Faux Columns和 Multi-Column Layouts Climb Out of the Box .
关于html - 全高 CSS 布局，多列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/289409/