完全な高さの偽の列

Question

私は実際に数年でウェブサイトをコード化していないので、かなり錆びています。私がしようとしているのは、固定幅とフルハイトのサイドバーと流体コンテンツ領域を作成することです。 （視覚的なモックアップ：http://i54.tinypic.com/2m2b445.pngを参照してください）

私は偽の列を越えて走り、彼らはほとんどのトリックをやっているようです。このテクニックがしていない唯一のことは、フルハイトのサイドバーです。ここで

は、私が使用しているCSSとHTMLです：

html,body { 
    height: 100%; 
} 
#page-container { 
    min-height: 100%; 
    margin: 0; 
    position: relative; 
} 
* html #page-container { 
    height: 100%; 
} 
#inner-container:after { 
    content: " "; 
    display: block; 
    clear: both; 
} 
#left-col { 
    float: left; 
    width: 250px; 
    background-color: #F3F3F3; 
} 
#right-col { 
    position: relative; 
    margin-left: 250px; 
} 

HTML：

<div id="page-container"> 
    <div id="inner-container"> 
     <div id="left-col"> 
      <ul> 
       <li>Lorem Ipsum</li> 
       <li>Dolar Sit Amet</li> 
       <li>Consectetur</li> 
       <li>Adipiscing</li> 
       <li>Elit Integer</li> 
      </ul> 
     </div> 
     <div id="right-col"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> 
     </div> 
    </div> 
</div> 

どのように私は左の列フルハイトを作ることができますか？私は別の列のテクニックを使用すべきですか？

Answer 1

サイドバーを絶対に配置し、コンテンツ領域に同等の余白を残すことができます。左：

<style> 
*, html { 
margin: 0; 
padding: 0; 
} 
html, body { 
height: 100%; 
position: relative; 
} 

/* i would use conditional stylesheets for IE fixes instead */ 
* html div.column { 
height: 100%; 
} 

div.column { 
min-height: 100%; 
} 
div#content { 
margin-left: 250px; 
background-color: #FFFF99; 
} 
div#sidebar { 
position: absolute; 
top: 0; 
left: 0; 
width: 250px; 
background-color: #99FFFF; 
} 
</style> 

HTML：

<div id="content" class="column"> 
content 
</div> 
<div id="sidebar" class="column"> 
sidebar 
</div> 

編集：この技術の一つの大きな利点は、ページのソースのナビゲーションなどの上にコンテンツマークアップを置くことができるということである - かなり良いSEOの練習。

Answer 2

簡単な方法は絶対的に配置された1つのお浮かべ左の列を切り替えてから、それをheight: 100%を与えることです：

#left-col { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 250px; 
    height: 100%; 
    background-color: #F3F3F3; 
} 

ライブバージョン：http://jsfiddle.net/ambiguous/XyBzC/

また、このアプローチで#inner-container:afterをドロップすることができますフロート左の列（これ以上浮動しない）をクリアするだけです。

なしバージョン:after：たとえば

html,body { 
    height: 100%; 
    padding: 0; 
} 

：http://jsfiddle.net/ambiguous/XyBzC/2/

http://jsfiddle.net/ambiguous/XyBzC/1/

そしてJosephはフィドルでスクロールバーを取り除くためにあなたがpadding: 0を追加することができ、コメントで権利であります

Answer 3

あなたが持っているものは、一般的に偽の列とは考えられていません。 The seminal article on faux columns is this A List Apart article。基本的な手法は、列の錯覚を列の親コンテナに作成する垂直方向に繰り返すイメージを添付することです。これにより、視覚的に列が完全な高さに伸びることが保証される。彼らは本当に必要でない限り、

は、私は絶対位置の要素から離れて（この場合はそうではありません。）

jsfiddleはそうhere's a simple example of faux columns