1. 首頁
  2. 問答
  3. 與頁眉，頁腳和多100％以上，高含量列CSS佈局

與頁眉，頁腳和多100％以上，高含量列CSS佈局

2012-11-02 57 views
4

這就是我想要達到的目標：與頁眉，頁腳和多100％以上，高含量列CSS佈局

Expected result http://f.cl.ly/items/1p0H2n1g24272G043m3n/Untitled-1.png

  • 頁腳應該留在即使內容的屏幕下方不會垂直填充視口。
  • 內容列的邊框應始終爲100％的內容高度。由於列的數量和寬度會在頁面之間變化，因此無法使用背景圖像爲僞列邊框。
  • 當所有內容都可見時，應該沒有滾動條（示例1）。
  • 解決方案應該是所有的HTML/CSS，沒有JS。
  • 最低瀏覽器支持應該是IE9 +和Firefox，Chrome，Safari，Opera的最新桌面版本;沒有怪癖模式。
  • 頁眉/頁腳/內容的寬度始終是固定的（所以頁眉和頁腳不需要放在內容區域內）。頁眉和頁腳的高度也是固定的。

我試過從Fluid Width Equal Height Columns和this sticky footer example的技術，但一直不能滿足所有的要求。任何提示都表示讚賞。

編輯：到目前爲止，我得到的最遠是通過模仿在webkit瀏覽器中正確運行但在IE9和Opera中無效的表格。 See the fiddle here。

HTML：

<div class="table outer"> 
    <div class="row header"> 
     <div class="cell">header</div> 
    </div> 
    <div class="row content"> 
     <div class="cell"> 
      <div class="table inner"> 
       <div class="row"> 
        <div class="cell">content 1</div> 
        <div class="cell">content 2</div> 
        <div class="cell">content 3</div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="row footer"> 
     <div class="cell">footer</div> 
    </div> 
</div>

CSS：

html, body { 
    height: 100%; 
} 
.table { 
    display: table; 
    min-height: 100%; 
    height: 100%; 
} 
.table.outer { 
    width: 500px; 
    margin: 0 auto; 
} 
.row { 
    display: table-row; 
} 
.cell { 
    display: table-cell; 
} 
.header, .footer { 
    height: 25px; 
    background-color: #999; 
} 
.content { 
    background-color: #eee; 
} 
.table.inner { 
    width: 100%; 
    min-height: 100%; 
    height: 100%; 
} 
.table.inner .cell { 
    width: 33%; 
    border-right: 1px dashed #c00; 
}

來源

2012-11-02 kaarel

回答

4

雖然不是語義理想的解決方案，我能找到實現所有既定要求的唯一途徑是要回到90年代，並使用表格進行佈局。

See the fiddle here。

HTML：

<!DOCTYPE html> 
<html>  
<head> 
    <meta charset="utf-8"> 
</head> 
<body> 
    <table class="outer"> 
     <tr> 
      <td class="header" colspan="3">header</td> 
     </tr> 
     <tr class="content"> 
      <td>content1</td> 
      <td>content2</td> 
      <td>content3</td> 
     </tr> 
     <tr> 
      <td class="footer" colspan="3">footer</td> 
     </tr> 
    </table> 
</body> 
</html>

CSS：

html, body { 
    height: 100%; margin: 0; 
} 
.outer { 
    min-height: 100%; 
    height: 100%; 

    width: 500px; 
    margin: 0 auto; 
} 
.header, .footer { 
    height: 25px; background-color: #999; 
} 
.content td { 
    width: 33%; 
    background-color: #eee; 
    border-right: 1px dashed #c00; 
    vertical-align: top; 
}

來源

2012-11-02 13:03:04 kaarel

0

試試這個：

#footer { 
    position:fixed; 
    left:0px; 
    bottom:0px; 
    height:30px; 
    width:100%; 
} 

/* IE 6 */ 
* html #footer { 
    position:absolute; 
    top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px'); 
}

來源

2012-11-02 08:00:34 Lao

+0

利用該技術，當該含量超過視口的高度，頁腳停留在屏幕的底部並沒有被按下（實施例2中所示的行爲是所需要的） – kaarel

相關問題

 相關問題