BinaryDevelop
  1. ホーム
  2. css

[解決済み】親のパディングを無視した絶対位置決め

2022-04-11 21:27:13

質問

絶対位置指定された要素がその親のパディングを尊重するようにするにはどうしたらよいでしょうか？内側の div を親の幅に伸ばし、その親の一番下に配置したいのですが、基本的にはフッターになります。しかし、子要素は親のパディングを尊重しなければならないのですが、それができません。子は親の縁にぴったりと押し付けられています。

だから、こうしたい。

が、こうなってしまいました。 

<html>
  <body>
    <div style="background-color: blue; padding: 10px; position: relative; height: 100px;">
      <div style="background-color: gray; position: absolute; left: 0px; right: 0px; bottom: 0px;">css sux</div>
    </div>
  </body>
</html>

内側のdivの周りにmarginを入れれば実現できるのですが、それを入れない方がいいんです。

どのように解決するのですか？

まず なぜ ということが起こっています。

その理由は、意外なことに、ボックスが position: absolute を含むボックスは、親のパディング ボックス（つまり、そのパディングを囲むボックス）です。これは、通常（つまり、静的または相対的な位置決めを使用している場合）、包含ボックスは、親の コンテンツ ボックスがあります。

ここで CSS仕様の該当部分 :

祖先がインライン要素の場合、その要素に対して生成された最初と最後のインラインボックスのパディングボックスを囲む境界ボックスが包含ブロックとなる......。そうでない場合，包含ブロックは，祖先のパディングエッジによって形成される。

最もシンプルな方法は、Winterの回答で提案されているように padding: inherit の上に、絶対位置の div . ただし、この方法が有効なのは、絶対位置決めされた div は、それ自身のパディングを追加で持つようにします。最も汎用的な解決策（両方の要素がそれぞれ独立したパディングを持つことができるという意味で）は、次のようなものだと思います。

  1. 相対的な位置の追加 div (パディングなし)で、絶対位置の div . その新しい div は親のパディングを尊重し、絶対位置決めされた div がそれを埋めることになります。

    もちろん、欠点は、単に体裁を整えるためだけにHTMLをいじっていることです。

  2. 絶対位置指定された要素にパディングを繰り返す（または追加する）。

    ここでの欠点は、CSSで値を繰り返す必要があるため、CSSを直接書いている場合はもろいことです。しかし、前処理ツールである SASS または LESS の場合、変数を使用することでその問題を回避することができます。これは私が個人的に使っている方法です。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します