jquery - 動的およびカスタムdivポジショニング

Question

私はこのdiv構造を持っています

<div class="panel">
    <div class="north"></div>
    <div class="center"></div>
</div>

外側のdivはjQueryのサイズ変更可能ですdiv をパーセンテージで配置しようとしましたが、

.north{height:30%}
.center{height:70%}

完璧に動作します、私はこれを手に入れました

今、私はこれを取得する方法に固執しています：

何か助けはありますか？
外側のdivはサイズ変更可能であることを忘れないでください。

これが私の出発点です。

編集
私も試しました

.panel{display:table;}
.north,.center{display:table-row;}

ただし、これはIE<8では機能しません

Answer 1

フロートを使用した別のソリューション：http：//jsfiddle.net/KMWw4/2/

.panel {
    width:  300px;
    height: 500px; /* explicit height */
    float: left;
}
.north {
    float: left; display: inline; /*iefix*/
    width:  100%;
}
.center {
    height: 100%;
}

.panel-percent .north {
    height: 30%; /* you can use percentages */
}
.panel-fixed .north {
    height: 100px; /* ... or pixel height */
}

​

Answer 2

あなたはこれを試すことができます：

http://jsfiddle.net/KSY6T/3/

.panel{
    min-height:150px;height:300px;overflow:hidden;position:relative;
    /* height:300px; is optional, i just used it for demonstrational purposes */
}

.north{
    position:absolute;top:0px;width:100%;height:150px;
}

.center{
    margin-top:150px;height:100%;
}

親コンテナのサイズを変更するだけで、何が起こるかを確認できます...

クロスブラウザの完全な互換性を自分で確認する必要があります。ブラウザで確認しましたが、すべてのブラウザで問題なく動作します。

• サファリ5
• オペラ11
• Firefox 3.5
• Firefox 4

Answer 3

.panel {
    position: relative
} 

.center { 
    position: absolute;
    top: 150px;
    bottom: 0px;
}

親/外側のdivを相対位置に設定し、内側のdivを絶対位置に設定することで、このようなトリックを実行できます。

更新されたフィドル：http：//jsfiddle.net/PnnMa/1/

Answer 4

簡単です。;）

1. 150pxオブジェクトをposition：absoluteおよびtop：0で配置します。（左右もゼロに設定する必要があるかもしれません）
2. 動的な高さの領域の上部マージンを150pxに設定します。