BinaryDevelop
  1. ホーム
  2. css

[解決済み] CSS 100% height と padding/margin の関係

2022-03-24 13:29:51

質問

HTML/CSSで、親要素の100%の幅や高さを持ち、かつ適切なパディングやマージンを持つ要素を作るにはどうしたらよいでしょうか？

親要素がquot;proper"である場合、私はそれを意味します。 200px を指定すると height = 100% と padding = 5px を取得する必要があると予想されます。 190px という高い要素を持つ border = 5px を四方に配置し、親要素の中央にきれいに配置しました。

さて、これは標準的なボックス モデルが指定する動作方法ではないことは分かっているので（その理由を正確に知りたいのですが...）、当然の答えが通用しません。 

#myDiv {
    width: 100%
    height: 100%;
    padding: 5px;
}

しかし、任意の大きさの親に対して、この効果を確実に発生させる何らかの方法があるはずだと思うのです。どなたか、この（一見簡単そうな）作業を達成する方法をご存じないでしょうか？

ちなみに、私はIEの互換性にはあまり興味がないので、（できれば）もう少し簡単にしたいです。

EDITです。 例を求められたので、私が思いつく最も簡単なものを紹介します。 

<html style="height: 100%">
    <body style="height: 100%">
        <div style="background-color: black; height: 100%; padding: 25px"></div>
    </body>
</html>

課題は、スクロールバーが必要になるほどページを大きくすることなく、ブラックボックスをすべての端に25ピクセルのパディングで表示させることです。

解決方法は？

このようなことは、「"」を読んで知りました。 PRO HTML and CSS Design Patterns "です。 その display:block はデフォルトの表示値で div しかし、私はそれを明示的にするのが好きです。 コンテナは正しい型でなければなりません。 position 属性は fixed , relative または absolute . 

.stretchedToMargin {
  display: block;
  position:absolute;
  height:auto;
  bottom:0;
  top:0;
  left:0;
  right:0;
  margin-top:20px;
  margin-bottom:20px;
  margin-right:80px;
  margin-left:80px;
  background-color: green;
}

<div class="stretchedToMargin">
  Hello, world
</div>

フィドル by Nooshu's コメント

関連

最新

おすすめ

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