css浮動サイドバイサイドdivsの高さ100％

私は画像なしでこれをどうやって尋ねるのか分かりません。私は2つのdivをサイドバイサイドで別のdiv内にあり、パディングとマージンはそのままです。これは私が達成したいものです：css浮動サイドバイサイドdivsの高さ100％

+-------------------------------------------------------------------+--------+ 
|          A       | C | 
| +-----------------------------------------------------------+ |  | 
| |        B       | |  | 
| |               | |  | 
| |               | |  | 
| |               | |  | 
| |               | |  | 
| |               | |  | 
| |               | |  | 
| +-----------------------------------------------------------+ |  | 
|                 |  | 
+-------------------------------------------------------------------+--------+

ここに私が得たものがあります。私はdivを浮動させて余裕を補うことができますが、div CをAの高さ全体に伸ばすことはできません。AもBも固定された高さを持っていません。 Aの完全な高さ？

+-------------------------------------------------------------------+--------+ 
|          A       | C | 
| +-----------------------------------------------------------+ |  | 
| |        B       | |  | 
| |               | |  | 
| |               | |  | 
| |               | +--------+ 
| |               |   | 
| |               |   | 
| |               |   | 
| +-----------------------------------------------------------+   | 
|                   | 
+----------------------------------------------------------------------------+

Aの高さは、それがあまりにも完全に流体レイアウトなので、幅がいずれかの固定されていないBの高さに延伸されます。基本的に、私は、すべての高さで遊んでみましたが、高さが:(

Aが固定されていないので、私はそれを動作させることはできませんCはA.

の全体の高さを拡張する必要があります。ただのdivラッパー基本的には、パディングは、余裕 Bは、実際にはマージンとパディング、フロートを持つ2つのdiv要素で構成されていない：左; Cが一つだけのdiv、フロートです：;： I

EDIT右CSSハックなしでIEをサポートする必要があります

出典

2011-01-05 sethvargo

yea。問題はdiv Cが浮動しているため、実際にはAの子ではありません（Bと同じです）。高さは親に適用され、Cは実際にはサイズにする親を持っていません – sethvargo

CSS等しいコラムの高さについて、ネット上で書かれたたくさんあります。私が一般的に使用する解決策は、すべての列の最大高さを計算するためにjQueryを使用し、次にjQueryを使用してすべての列の高さを同じものに設定することです。私は通常これを手作業で行いますが、タスクを達成するためのプラグインがいくつかあります。

純粋に視覚的な理由から列の高さを同じにする必要がある場合は、同じ高さの錯覚を与えるために列の背景イメージを使用してクリエイティブにすることができます。これはあなたのデザインによっては必ずしも機能するとは限りませんが、過去に使用しました。

出典

2011-01-05 20:22:46 mpdonadio

私はjQueryを使う必要がありました。 JSを使わずにIE6では不可能だと判断しました。ブラウザがJSをサポートするように要求されています。 – sethvargo

jQueryを使用してIE6の問題を解決することは、CSSのハック/回避策（条件付きスタイルシートを使用していても）を克服するのではなく、過去2年間のツール選択肢でした。つまり、あなたのレイアウトがどのように見えるのか分かりませんが、親コンテナの背景イメージを使って高さを偽ることはとても便利なことです。 – mpdonadio

幅が流動的であるので私はそれをしません – sethvargo

フローティングの代わりにC position: absolute; right: 0;を作るのはどうですか？これと同じように：http://jsfiddle.net/JMC_Creative/2gr3T/1/

#a { overflow:auto; 
position: relative; 
} 

#b {height: 200px; 
    width: 200px; 
    margin: 50px; 
    float: left; 
} 

#c { height: 100%; 
    position: absolute; 
    right: 0; 
    width: 40px; 
}

出典

2011-01-05 20:06:49 JakeParis

それは素晴らしいです！私がインターネットエクスプローラをサポートしようとしているのでなければ、私はそれです。 IE6では、CはAではなくPAGEの右側に付いています。ええ、私はIEがうまくいることを知っています。私はそれをサポートする必要はありませんが、私はこのプロジェクトのためにしなければなりません。 – sethvargo

C _has_がAの外にある場合は、ソリューションのjavasriptに移動することをお勧めします。 – JakeParis

IE6は、parentがpositionのときにそれを正しく取得する必要があります：relative ...または私はあまりにも酔っぱらいです。 – kapa

ここで、クレイジーなアイデアだと私はCSSをうまくする必要があると思いますが、

...あればAはBとC Cは絶対にAの右側に接して配置されて含まれているものを上、下の Aはここで右パディングやマージンなど幅広いとしてC

出典

2011-01-05 20:07:03 n8wrl

これはうまくいく、私は定期的に私のWebアプリケーションでこのメソッドを使用します。しかし、特にオーバーフローを避けたい場合は、欠点があります。 – Sandwich

これはIE6では機能しません。 – sethvargo

**＃A **は 'position：relative'または' position：absolute'を持つ必要があります。それ以外の場合は ''要素の絶対値になります。このメソッドは、IE5のすべての方法に準拠しています。しかし、やはり、状況に応じて不利な点があります。 – Sandwich

はあなたを助けることが私の個人的なライブラリーからの抜粋、また、このquestionをチェックアウトして、このより具体的なのjavascriptsolutionでいました。

いくつかの注意：デフォルトでは

、これらの値は、それ以外の要素は絶対になり、あなたがrelativeまたはabsoluteのいずれかに親のposition属性を設定

<body>

に最も近い

position

/* 
Name: Absolute 100% Height 
Author: DSKVR 2010 
Website: http://dskvry.com 
*/ 

body *.full-height, 
body *.full-height-left, 
body *.full-height-left, 
body *.full-height-width { 
    position:absolute; 
    height:auto; 
    margin:0; 
} 

body *.full-height { 
top:0; 
bottom:0; 
} 

body *.full-height-left { 
    top:0; 
    bottom:0; 
    left:0; 
} 

body *.full-height-right { 
    top:0; 
    right:0; 
    bottom:0; 
} 

body *.full-area { 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
}

出典

2011-01-05 20:20:55 Sandwich