全高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佈局，多列

回答

相關問題