2

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

这是 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/

4

6 回答 6

5

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

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

于 2008-11-14T07:51:29.483 回答
2

这是我最终使用的，使用这种高值的技术padding-bottom，具有相等但反转的值margin-bottom- 然后你设置overflow:hiddendiv 包围那个巨大的边距。

这是相当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>
于 2008-11-17T14:45:23.827 回答
1

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

于 2008-11-14T07:12:51.370 回答
1

试试这个修改：

<!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>
于 2008-11-14T08:34:03.420 回答
0

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

<div style="clear: both; font-size: 1px; line-height:1px">&nbsp;</div>
于 2008-11-14T08:19:03.967 回答
0

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

  1. 删除#left 和#right div。
  2. 制作一个 592 像素宽、透明背景并在其左右具有渐变的新单一背景图像 - 具有左侧渐变的 1 像素高图像 - 透明部分 504 像素宽 - 右侧渐变。
  3. 将徽标添加到#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 中进行了测试（在没有访问 Windows / Mac atm 的情况下运行 Linux），但我认为在 IE / Opera 中应该不会有任何大问题。

于 2008-11-14T11:30:37.590 回答