CSS：3柱高100％

下面是一個例子頁：CSS：3柱高100％

http://jsfiddle.net/SkeLLLa/pwfH2/

我想設置爲content類100％的高度（請參閱「問題就在這裏」，在CSS源評論）但是當我做這個左右列（嵌套在content div）變成0px高度。但是當content以像素爲單位設置高度時，它可以正常工作。

有沒有沒有JavaScript的解決方案？

來源

2012-04-10 m03geek

http://stackoverflow.com/questions/4515251/holy-grail-layout-with- 100-高度 – 2012-04-10 09:20:42

從另一個「馬太福音」：http://www.alistapart.com/articles/holygrail/ – 2012-04-10 09:26:18

加入 'padding-bottom：9999px; margin-bottom：-9999px;' 左右欄有幫助。謝謝！ – m03geek 2012-04-10 10:28:27

使用display: inline-block的列和height:100%爲html和body標籤：

<!doctype html> 
 
    <html> 
 
     <head> 
 
     <style> 
 
     html, body, #content, #left, #right, #center { height: 100%; } 
 
     #content { width: 100%; } 
 
     #left, #center, #right { display:inline-block; } 
 
     #left, #center, #right { width: 32%; border: 1px solid red; } 
 
    
 
     /* media query for IE 6-7 */ 
 
     @media, 
 
     { 
 
     #left, #center, #right { display:inline; } 
 
     } 
 
     </style> 
 
     </head> 
 
     <body> 
 
     <div id="content"> 
 
      <div id="left">foo</div> 
 
      <div id="center">bar</div> 
 
      <div id="right">baz</div> 
 
     </div> 
 
     </body> 
 
    </html>

來源

2012-05-22 23:48:21

CSS：3柱高100％

回答

相關問題