全高CSS布局，多列

我有一个工作的布局，但它有一个非常恼人的问题..当内容比屏幕高，背景停止。全高CSS布局，多列

这是坏ASCII艺术格式所需的布局：

_____________________ _ 
| | 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/

来源

2008-11-14 dbr

你能发布实际的html页面，所以我们可以调整和测试吗？ – Karan 2008-11-14 07:27:03

当然，我已经把它添加到帖子中 - 地址是.. http://data.dbrweb.co.uk/tmp/fifestock_layout_problem/ – dbr 2008-11-14 09:40:44

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

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

来源

2008-11-14 07:51:29

我刚看了一个视频约YUI's grids看着非常有前途的（建议观望！）。我还没有时间来测试它，但是，很可能在将来会这样做。这可能是你想要的。

来源

2008-11-14 07:12:51

我看着YUI的东西，但它似乎不够灵活 - 我只能训练如何使用〜700px，〜900px和100％宽度的柱子？ – dbr 2008-11-14 09:50:10

确实如此，有一些预定义的列宽。但你可以自由修改值以适应你的需求，自然... – 2008-11-14 15:58:18

<div id="right">...</div>后补充一点：

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

来源

2008-11-14 08:19:03

我会在哪里添加这个？ – dbr 2008-11-14 09:46:49

Oh .. Markdown将div标记视为真正的HTML .. – dbr 2008-11-14 09:48:26

尝试用这个修改：

<!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-14 08:34:03 ARemesal

了那里，在这一个结束，而是必须对您的标记和一些变化的图像。

删除#left和#right div。
制作一个592像素宽，透明背景的新单幅背景图像，并在其左侧和右侧具有渐变 - 带有左渐变的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（没有访问Windows/Mac atm的情况下运行Linux）测试过，但我认为在IE/Opera中应该没有任何大问题。

来源

2008-11-14 11:30:37

下面是我在margin-bottom结束了使用，使用this technique高价值为padding-bottom，与等量但反向的价值 - 那么你的DIV包围那巨大的保证金设置overflow:hidden。

这是相当hackish，但它的作品！我现在有一个全高，一个em-defined宽度和一个全高的背景图像。没有多少额外的标记（一个容器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-17 14:45:23 dbr

全高CSS布局，多列

回答

相关问题