0

高さを固定したラッパー (window.innerHeight を使用して javascript で設定) があり、使用している cms によって生成されたネストされた div の inifite シリーズがあります。非常に深くネストされた、私のウェブ構造があります。問題は、ウェブ構造の div にパーセンテージの高さを追加すると、ラッパーに到達する前に空白の div が多すぎて機能しないことです。Web 構造の前の div には動的 ID しかなく、使用できません。

ここで非常に単純な例を再現しました: http://jsfiddle.net/omegaiori/BXwcP/1/

html

<div class="wrapper">
<div class="mmm">
    <div></div>
    <div class="him"></div>
</div>

CSS

    .wrapper {
    width:500px;
    height:500px;
    background:red;
}
.him {
    width:50%;
    height:50%;
    background:yellow;
}
/* only works if you uncomment this 
.mmm {height:100%}
*/

コメントに記載されているように、ネストされたすべての div に height: 100% を指定してから、鉱山に到達する必要があります (高さは 50% である必要があります)。

この動作をバイパスできる方法はありますか?

どうもありがとう

4

3 に答える 3

2

パーセンテージ ベースの幅/高さで要素を定義する場合、親の寸法も指定する必要があります。

親の寸法が設定されていない場合、 に設定.himしても意味がありません。0 の 50% も 0 であるため、表示されません。この場合、親の高さ/幅を設定する必要があります。この場合は.width:50%height:50%.mmm

寸法は既に に設定されている.wrapperため、それを親として使用できます。このjsFiddleをここで参照してください

これは、事前定義されたディメンションの親内に要素を配置すると仮定すると機能します。この jsFiddle を参照してください。

于 2013-10-29T17:32:04.157 に答える
0

divhimは親 div の 50% の高さと幅を取り、親 div はmmmで、高さと幅は 0 です。0 の 50% は 0 です。

于 2013-10-29T17:32:49.800 に答える
0

これは少しハッキリしていますが、jQuery (またはネイティブ JavaScript) を使用して、親が読み込まれた後に子 div の高さを設定できますか?

http://jsfiddle.net/remus/BXwcP/3/

$(document).ready(function() {
    $('.him').css("height", $('.wrapper').height() / 2);
});
于 2013-10-29T17:36:36.690 に答える