スクロールのないフルハイトの列

Question

私はコンテンツ（#container）をトップ（.top-wrap）からフッター（.html）に収めるようにしようとしている現時点ではhttp://weloveprivacy.com/です。フッターを使用して）列（.front1、.front2、.front3）は常に同じ高さを持ち、画面を塗りつぶして、枠線が上から下に伸びるようにします。

これは純粋なCSSで可能ですか？

Answer 1

これは楽しいことでした。次のCSSを追加してください。

.nav { 
left:0; 
} 
#wrapper { 
overflow:hidden; 
} 
#container { 
height:auto !important; 
min-height:100%; 
margin:0 auto; 
padding:0; 
} 
#container > div { 
margin-bottom:-10000px; 
padding-bottom:10000px; 
} 
.footer { 
margin-top:-97px; 
position:relative; 
} 

jsFiddle Exampleをご覧ください。

注：margin-bottom/padding-bottomハックはIEの古いバージョンを中断します。私は条件文を使って、そのスタイルを壊れたバージョンに提供し、単純に列が伸びずに見えるようにすることをお勧めします。

Answer 2

#containerに次のCSSプロパティを追加します。front1、front2から318px：

width: 33%; 

削除幅：

float: left; 
width: 100%; 

は、.front2、.front1する.front 3を次のプロパティを追加します。 、front 3。これで列は画面の幅全体に伸び、各列の幅は同じになります（幅の33％を占めます）。

Answer 3

あなたがしようとしていることは、少なくともあなたが思っている方法では純粋なCSSでは不可能です。あなたが何をすることができるかは、faux columnsのようなものでそれを偽造しています。アイデアは、要素を含む3つの列をラップし、垂直にタイルする要素に背景イメージを適用することです。これにより、同じ高さの列の錯覚を作り出すことができます。

変更を加えるために画像を編集する必要があるので、維持するのはちょっと難しいですが、それは信頼できるものです。