このレイアウトでコンテンツを100%の高さと等しい高さの列にする方法は?

my_menuが上に固定され、ヘッダが続き、960pxのコンテンツが続き、中央に3つの列が左にフローティングされ、つづいてスティッキーフッターが続くこのレイアウトがあります。

  1. 問題は、コンテンツを100%の高さに伸ばす方法です いずれかの子列に十分なコンテンツがない場合でも、

  2. 列の種類に関係なく、3つの列の高さをどのようにするか     コンテンツ?

  3. スティッキーフッターを維持しましょう!純粋なCSS、JavaScriptなし、いいえ     JQuery!

HTMLマークアップ

<!DOCTYPE HTML> 
 
<head> 
<meta charset="utf-8" /> 
<title>Document Title</title> 
<link rel="stylesheet" href="main.css" type="text/css" /> 
</head> 
<body id="index"> 
<div id="wrapper"> 
    <div id="my_menu"> 
    FIXED MENU WIDTH 100% 
    </div> 
    <div id="my_header"> 
    HEADER WIDTH 100% 
    </div> 
    <div id="content"> 
        

CONTENT 960px

<div id="col1" class="content_columns"> COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% COLUMN 1 WIDTH 320px HEIGHT 100% </div> <div id="col2" class="content_columns"> COLUMN 2 WIDTH 320px HEIGHT 100% COLUMN 2 WIDTH 320px HEIGHT 100% COLUMN 2 WIDTH 320px HEIGHT 100% COLUMN 2 WIDTH 320px HEIGHT 100% COLUMN 2 WIDTH 320px HEIGHT 100% COLUMN 2 WIDTH 320px HEIGHT 100% COLUMN 2 WIDTH 320px HEIGHT 100% COLUMN 2 WIDTH 320px HEIGHT 100% COLUMN 2 WIDTH 320px HEIGHT 100% </div> <div id="col3" class="content_columns"> COLUMN 3 WIDTH 320px HEIGHT 100% COLUMN 3 WIDTH 320px HEIGHT 100% COLUMN 3 WIDTH 320px HEIGHT 100% COLUMN 3 WIDTH 320px HEIGHT 100% COLUMN 3 WIDTH 320px HEIGHT 100% </div> <div class="clear_floats"></div> <!-- For Clearing Floats --> </div> <div class="push"></div> <!-- For Sticky Footer --> </div> <div id="my_footer"> STICKY FOOTER WIDTH 100% </div> </body> </html>

CSSスタイル

* /* For CSS Reset */ 
{ 
padding: 0; 
margin: 0; 
} 

html, body 
{ 
width: 100%; 
height: 100%; 
} 

div#wrapper 
{ 
width: 100%; 
height: 100%; 
min-height: 100%; /* For Sticky Footer */ 
height: auto !important; /* For Sticky Footer */ 
margin: 0 auto -70px; /* For Sticky Footer */ 
} 

div#my_menu 
{ 
width: 100%; 
height: 50px; 
outline: 1px solid black; 
background-color: grey; 
text-align: center; 
position: fixed; 
} 

div#my_header 
{ 
width: 100%; 
height: 100px; 
outline: 1px solid black; 
background-color: yellow; 
text-align: center; 
padding-top: 50px; 
} 

div#content 
{ 
width: 960px; 
margin: 0 auto; 
outline: 1px solid black; 
background-color: brown; 
text-align: center; 
} 

div.content_columns 
{ 
width: 320px; 
outline: 1px solid black; 
background-color: gold; 
text-align: center; 
float: left; 
} 

div.clear_floats /* For Clearing Floats */ 
{ 
clear: both; 
} 

div#my_footer 
{ 
width: 100%; 
height: 70px; 
outline: 1px solid black; 
background-color: pink; 
text-align: center; 
} 

div.push /* For Sticky Footer */ 
{ 
height: 70px; 
} 
2
私はまた、それはテーブルで簡単に習得できますが、レイアウト用のテーブルを再構築しましたか?これはKtash向けです!
追加された 著者 Jawad,
あなたは一見無作為の質問に3倍の賞金を払ったのはなぜですか?
追加された 著者 Rob W,

4 答え

A solution with full IE6+ support. I'll pull out and explain the relevant bits of code.

現代的なサポート

div.content_columns {
    width: 320px;
    outline: 1px solid black;
    background-color: gold;
    text-align: center;
    display: table-cell; /* No floats, this instead */
}

現代のブラウザはこの作業を簡単に行うので、これを動作させるには display:table-cell を使うだけです。列の高さを等しくし、表セルとして機能します。簡単レモンスクイージーピーシーレモン。

IE 6 & 7 support

<!--[if lte IE 7]>

今、IE 6と7のサポートのために、いくつかのトリックを使用します。まず、条件付きコメントでこれを行う必要はありませんが、私はそれがより好きです。私にクリーナー。しかし、CSSのハックを使ってこれらの値をIEでしか使えないようにすることができます。

What we're doing is getting IE 6 & 7 to treat each column as an inline-block element, but since they don't support that (for block level elements at least) we use inline display, and a zoom: 1; fix to trigger IE's hasLayout property. This will treat it like it is an inline-block elmenent. Then, we set them all to be aligned at the top with each other, and use another little trick. We use the padding: 9999px to extend the bottom of the element so far that the other elements are not likely to be longer than it, and we use margin: -9999px; to not change the rendering of the page when we do so. We don't want to extend the page, just the background. 9999px is arbitrary and can be any value as long as it is high enough to be greater than the difference between the longest and shortest columns. And for the final touches, we set overflow: hidden on the container element so that the backgrounds don't extend the page by bleeding out the bottom.

そしてそこには、純粋なCSSを使用した複数列の固定幅レイアウトの完全なIE 6+サポートがあります。 2 (プラスMS zoom )をクリックします。

3
追加された
Heh、これは表を表示用に使用していないため、表の表示スタイルをシミュレートしています。それは、ページのセマンティクスに関するものです:)
追加された 著者 Ktash,
HaHa、たとえ表示されていてもテーブルに回帰する:table-cell;彼。そして私は長い間暖かい議論を望んでいました。笑。それにもかかわらず、偉大なメイト!
追加された 著者 Jawad,

bfrohs came up with a solution that works in none-IE browsers: Full height columns without scroll

@ Jawad - あなたの時間と助けをもう一度ありがとう! :)

1
追加された

グリッドレイアウトを使用せずに純粋なCSSではこれを行うことはできません。 flexbox のいずれかであり、どちらもブラウザであまりサポートされていません。 (Flexboxはすでに少なくともw3cの作業用ドラフトです...)

これを回避するには、いくつかの欠点があるmin-heightを適用するか、jsで高さを設定します。私は合理的なクロスブラウザーのcss-solution atmを知らない。

0
追加された
私はこれが純粋なCSSで可能であると確信しています。私は以前にそれをしましたが、私の人生のために、私はそれを以前にどのようにしたのか分かりません。唯一の違いは、私が問題を引き起こしていると思われる粘着性のフッターです。私は是正するために立つ。
追加された 著者 Jawad,
つまり、div #contentとdiv.content_columnsに固定された高さを指定していますか?
追加された 著者 Jawad,
私はすでにそれを試みましたが、粘着フッタの動作を見ることはできません - positioniseverything.net/articles/ onetruelayout/equalheight
追加された 著者 Jawad,
位置の絶対/固定の追加は問題を解決しますが、コンテンツがフッターをオーバーフローするとどうなりますか? Thayはオーバーラップします!
追加された 著者 Jawad,
私はこの問題を数回前に扱っていましたが、私はかなり確信しています、divに固定高さを設定していないcss-solutionはありません。しかし、私は訂正して嬉しく思っています^^
追加された 著者 Christoph,
私はこれのような何かのハッキーを意味した: jsfiddle.net/E9frF/3
追加された 著者 Christoph,
あなたのフッターがどのように「粘着性」になっているかに応じて、これを解決するためにフッタに絶対/固定の位置を適用できますか?
追加された 著者 Christoph,

あなたはいつでもオール "フェイクコラムテクニックを試すことができます。つまり、3つのdivを含む要素には、垂直にタイルする背景イメージがあります。その画像には列分割のための線があり、等しい高さの錯覚を作成します。

保守性の面では控えめです。レイアウトを変更するためにイメージを編集する必要がありますが、信頼性があります。

0
追加された