Question

我有一个正在运行的布局，但它有一个非常恼人的问题..当内容比屏幕高时，背景停止。

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

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

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

..或短篇内容..

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

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

我尝试使用CSS min-height hack来修复中间列，但是渐变只会扩展到内容（在左列中，单个 ，在右列中标志）

这是布局的样子：

Layout

问题（当浏览器窗口垂直收缩时）：

Problem

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

Answer 1

鉴于您的左侧和右侧的渐变列中都有渐变，您需要实现“ faux columns ”。

如果您使用的是弹性版本，请查看Elastic Faux Columns和Multi-Column Layouts Climb Out of the Box。

Answer 2

以下是我最终使用的内容，使用padding-bottom的高this technique值，在margin-bottom中使用相等但倒置的值 - 然后在div上设置overflow:hidden封闭那个巨大的利润。

这是相当hackish，但它的工作原理！我现在有一个全高，一个em定义的宽度，每边都有一个全高背景图像！没有太多额外的标记（容器div，三列中的每一列都是div）

<html>
<head>
    <title>Yay</title>
    <style type="text/css" media="screen">
        body, html{
            height:100%;
            margin:0;
            background:#1d4b76;
        }
        #contain{
            width:40em;
            margin-left:auto;
            margin-right:auto;
            overflow:hidden;
        }
        #left{
            background-image:url("static/grad_left.png");
            background-repeat:repeat-y;
            background-position:right;

            height:100%;
            float:left;
            width:150px;

            padding-bottom:10000px;
            margin-bottom:-10000px;
        }
        #middle{
            float:left;
            background:#000;
            color:#fff;
            width:20em;

            padding-bottom:100000px;
            margin-bottom:-100000px;
        }
        #right{
            float:left;
            background-image:url("static/grad_right.png");
            background-repeat:repeat-y;
            background-position:left;
            width:150px;

            padding-bottom:100000px;
            margin-bottom:-100000px;
        }
    </style>
</head>
<body>
    <div id="contain">
        <div id="left">
            &nbsp;              
        </div>
        <div id="middle">
                    Put lots of text here
        </div>
        <div id="right">
            <img src="static/logo.png" width="150" height="150" alt="Logo">
        </div>
    </div>
</body>
</html>

Answer 3

我刚观看了一段关于YUI's grids的视频，看起来非常有前途（推荐观看！）。我还没有时间测试它，但很可能将来会这样做。这可能就是你想要的。

Answer 4

尝试进行此修改：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <title>Test page</title>
 <style type="text/css" media="screen">
   html, body{
     margin: 0 auto 0 auto;
     padding:0;
     width:22em;
   }

   #wrapper{
      background-color:#ccc;
   }

   #left{
      float:left;
      width:22em;
      background-color:#00f;
    }

    #middle{
       float:right;
       width:18em;
       margin-right:2em;
       background-color:#f00;
     }

     #right{
        float: right;
        width:20em;
        background-color:#0f0;
        background-image: url(static/logo.png);
        background-position: top right;
        background-repeat: no-repeat;
      }

   </style>
   </head>
   <body>
     <div id="wrapper">
       <div id="left">
          <div id="right">
             <div id="middle">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br><br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br><br>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br><br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in oluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br><br>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br><br>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br><br>
             </div>
           </div>
         </div>
       </div>
   </body>
</html>

Answer 5

在<div id="right">...</div>之后添加此内容：

<div style="clear: both; font-size: 1px; line-height:1px">&nbsp;</div>

Answer 6

最后得到了这个，但不得不对你的标记和图像进行一些更改。

删除#left和#right div。
创建一个592px宽的新背景图像，透明背景并在其左右两侧有渐变 - 一个带有左渐变的1px高图像 - 透明部分504px宽 - 右渐变。
将徽标添加到#wrapper，就在#middle

所以标记现在看起来像这样：

<body>
    <div id="wrapper">
        <img src="static/fifestock_logo.png" />
        <div id="middle">
        ... etc ...
        </div>
    </div>
</body>

然后，样式表中的相关更改是：

#wrapper{
    height:100%;
    width:805px;
    margin-left:auto;
    margin-right:auto;
    text-align: right;
}

#middle {
    width:504px;
    padding: 0 44px;
    margin: -154px auto 0 auto;
    background:#000 url(new_bg.png) repeat-y top left;
}

对我来说很好。

仅在FF3和Opera中测试过（运行Linux而无法访问Windows / Mac atm）但我认为在IE / Opera中不应该有任何大问题。

全高CSS布局，包含多列

6 个答案: