[解決済み】絶対位置のdivが親divの高さを拡張するようにした。
2022-04-01 23:22:55
質問
下のCSSを見るとわかるように、私は
child2
の前に位置するようにします。
child1
. これは、私が現在開発しているサイトがモバイル端末でも動作するようにするためで、その場合、モバイル端末では
child2
というのも、モバイル端末ではコンテンツの下に表示させたいナビゲーションが含まれているからです。- なぜマスターページが2つないのですか?これは、唯一の2つの
divs
このマイナーチェンジに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
の高さは動的で、サブサイトによってナビゲーションの項目が増えたり減ったりするからです。
絶対位置指定された要素は、フローから削除され、他の要素から無視されることは知っています。
を設定してみました。
overflow:hidden;
を親Divに追加しましたが、これは役に立ちませんでした。
clearfix
.
最後の手段としては、JavaScriptで2つの
divs
しかし、今のところ、これを行うための非JavaScriptの方法があるかどうか試してみることにします。
解決方法は?
絶対位置指定された要素はフローから削除され、他の要素から無視されることは知っています。
固定高さを使うか、JSを介在させる必要があります。
関連
-
[解決済み】ローカルの実行ファイルへのハイパーリンクを作成する方法は?
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] will-change' や translateZ() ハックは 'transition: height' のパフォーマンスを向上させるか?
-
[解決済み] 文字列が部分文字列で終わっているかどうかをXPathでテストする?
-
[解決済み] 送信ボタンが機能しない
-
[解決済み] 絶対位置指定された要素をdivの中央に配置するにはどうしたらよいですか?
-
[解決済み] Bootstrapの列をすべて同じ高さにするにはどうしたらいいですか?
-
[解決済み] ボディの高さをブラウザの高さの100%にする
-
[解決済み] 親ディバイスの高さを指定せずに、子ディバイスの高さを100%にする方法は?
-
[解決済み] 位置は絶対だが、親に対して相対的
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】CSSの背景画像が表示されない。
-
[解決済み] 名前が''の無効なフォームコントロールはフォーカスされない
-
[解決済み] div要素間の空白を削除する方法
-
[解決済み] IE=edge,chrome=1というのは今でも有効なのでしょうか?
-
[解決済み] (X)HTMLにおける "PRE "タグの用途は何ですか?
-
[解決済み] SRCとHREFの違い
-
[解決済み] WebForms UnobtrusiveValidationMode には、'jquery' の ScriptResourceMapping が必要です。jquery という名前の ScriptResourceMapping を追加してください(大文字と小文字を区別します)。
-
[解決済み] margin-block-startとmargin-topの違いは何ですか?
-
[解決済み] アトムでキーバインドリゾルバーのポップアップを消すにはどうしたらいいですか?
-
[解決済み] div の高さをコンテンツに合わせて拡張する