以下のCSSでわかるように、自分child2
自身をの前に配置したいと思いchild1
ます。これは、私が現在開発しているサイトがモバイルデバイスでも機能する必要があるためです。child2
、モバイルデバイスのコンテンツの下に必要なナビゲーションが含まれているため、下部必要がです。-なぜ2つのマスターページではないのですか?これはdivs
HTML全体で再配置される唯一の2つであるため、この小さな変更の2つのマスターページはやりすぎです。
HTML:
<div id="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
CSS:
parent { position: relative; width: 100%; }
child1 { width: auto; margin-left: 160px; }
child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }
child2
さまざまなサブサイトでナビゲーションアイテムの数が増減する可能性があるため、高さは動的です。
絶対配置された要素がフローから削除され、他の要素によって無視されることを知っています。親divに
設定しようとしoverflow:hidden;
ましたが、それも役に立ちませんでしたclearfix
。
私の最後の手段は、JavaScriptを2つにdivs
応じて再配置することですが、ここでは、JavaScript以外の方法でこれを実行する方法があるかどうかを確認します。