可変の高さのコンテナに合わせて内側divを伸ばします。不可能?

私は、私がかなり良いと思うのが好きです...まあ、不断の... Web開発者。私はおそらく... IDK、50のWebサイト、FlashとJavascript、そしてデータベースバックアップされたアプリケーションの数が多く、有能に偽装できるように十分なグラフィックデザインを行っています:)

私はこの問題を半年に渡って私のキャリアの中で走ってきました:コンテナの高さが変わるときに、内側divを包含divの100%の高さに設定するにはどうすればよいですか?私はあなたがJavascriptでそれを行うことができるか、または偽の列を使用することができることを知っていますが、純粋なHTML/CSSでそれを行う方法がないなら、私は人生とW3Cで非常に失望するつもりです

Here be the mockup matey: http://random.siliconrockstar.com/heightTest/

内部divの#contentが#containerをプッシュします。 #shadowというピンクの部分を#contentと同じ高さにします。私がこの問題に遭遇する通常のケースは、Web開発について何も知らないデザイナーと多くのドロップシャドウを使用することです。ピンクの部分は#contentの右端を下に広げる必要があるドロップシェードです。

脇に:はい、私はあなたがCSSでdropshadowsを行うことができることを知っています、IEでさえ、いくつかのハッキングがありますが、この場合、私はそれをやることを妨げる設計上の問題があります。

Javascriptなしでこれは本当に不可能ですか? :(

1

5 答え

IE6にトピックがない場合は、次の操作を実行できます。

#shadow{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100px;
  background: #F69;
}
2
追加された
あなたは素晴らしいです。私のXP/IE7のVMでは動作しませんが、私は気にしません、それはIE8で動作します:)
追加された 著者 siliconrockstar,

私は多分新しいcss3のものがこれを手助けし始めると思っている: 例えば

.container { display: box; box-align: stretch; box-orient: vertical; }  
.container div { box-flex: 1; }

(これには -moz --webkit - の接頭辞が必要な場合があります)

1
追加された

I think it's impossible without JavaScript but according what you need you can use this kind of stuff: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

1
追加された
ええと、この種のものは、ちょうどjavascriptを使用するよりも混乱するハックのように思えます。返信をありがとう、非常に興味深い記事です。
追加された 著者 siliconrockstar,

ピンクの場合

#shadow{
    height: inherit;
}
0
追加された
動作していないように見えますが、指定されていない高さを継承できないためです。
追加された 著者 siliconrockstar,

まあ。それを行うにはいくつかの方法があります。最も古いものは、そこに説明されているように大きなボトムパッドと大きなマイナスボトムマージンを使用することです: http://www.alphapapahotel.com/equal-height-div-columns-100-percent/css/

しかし、この方法では欠点があります:親要素のオーバーフローを隠すように設定する必要があります。したがって、絶対配置された要素を内側にオーバーフローさせる場合、それを行うことはできません。また、領域が「オーバーフロー:隠されている」場合は、 divにアンカー( など)があると、div内の領域がページではなくスクロールされます。

もう1つの方法は、表のセルプロパティを使用することです: http://jsfiddle.net/8UPeR/ 。以前のブラウザでは動作しませんでした。

しかし#contentの高さまで#shadowを伸ばすだけでは、擬似エレメント( http: //jsfiddle.net/PWMsz/1/ )またはtopekの例のように「position:absolute」と入力します。

0
追加された