全高 CSS 布局，多列答案

【问题标题】：Full-height CSS layout, with multiple columns全高 CSS 布局，多列
【发布时间】：2010-09-22 07:26:34
【问题描述】：

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

这是所需的 bad-ASCII-art 格式的布局：

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

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

..或短内容..

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

基本上它看起来像一个单独的柱子，两边都有一个发光柱子。在左发光是一个标志。当内容很短时，它仍然是全高。

我尝试使用CSS min-height hack，它修复了中间列，但是渐变只延伸到内容（在左列中，单个&nbsp;，在右列中的徽标）

这是布局的样子：

还有问题（当浏览器窗口垂直缩小时）：

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

【问题讨论】：

您能否发布实际的 html 页面以便我们进行调整和测试？
好的，我已经把它加到帖子里了——地址是..data.dbrweb.co.uk/tmp/fifestock_layout_problem

标签： html css layout

【解决方案1】：

我刚刚看了一个关于YUI's grids 的视频，看起来很有希望（推荐观看！）。我还没有时间对其进行测试，但将来很可能会这样做。这可能是你想要的。

【讨论】：

我查看了 YUI 的东西，但它似乎不够灵活 - 我只能练习如何拥有 ~700px、~900px 和 100% 宽度的列？
没错，有一些预定义的列宽。但是您可以随意修改这些值以满足您的需要，自然......

【解决方案2】：

鉴于您的渐变在左右分开的列中，您需要实现“faux columns”。

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

【讨论】：

【解决方案3】：

在<div id="right">...</div>之后添加这个：

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案5】：

最终用这个实现了，但必须对您的标记和图像进行一些更改。

删除#left 和#right div。
制作一个新的单一背景图像，宽 592 像素，透明背景，左右有渐变 - 1 像素高的图像，左渐变 - 透明部分 504 像素宽 - 右渐变。
将徽标添加到#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 中应该没有什么大问题。

【讨论】：

我认为 dbr 想要一种液体设计，所以你不能使用以像素为单位的固定宽度。但是，如果可以接受固定宽度，那么您的解决方案就可以并且更干净。

【解决方案6】：

这就是我最终使用的，使用 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>

【讨论】：