css - 違い - padding 左右のみ




CSS 100%、パディング/マージン (9)

これは数日間は私を夢中にさせてくれましたが、現実にはここ数年の間、私はヒットしました。HTML / CSSでは、幅や幅を持つ要素を作るにはどうすればいいですか?高さは親要素の100%で、まだ適切な埋め込みまたは余白がありますか?

「適切」とは、親要素のheight = 100%200pxheight = 100% padding = 5pxpadding = 5pxと指定すると、 border = 5px 190px高さが190pxの要素をすべての面に配置し、親要素をうまく中心に配置する必要がある。

さて、私はそれが標準的なボックスモデルがそれがうまくいくと指定している方法ではないことを知っています(なぜ、正確には...知りたいのですが)、明らかな答えはうまくいかない:

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

しかし、私には、任意のサイズの親に対してこの効果を確実に生み出す方法がいくつか存在しなければならないように思えます。 誰もこの(一見単純な)タスクを達成する方法を知っていますか?

ああ、記録のためにIEの互換性にはあまり関心がありませんので、うまくいけば少し楽になります。

編集:例が求められて以来、ここで私が考えることができる最も単純なものです:

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

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


ページの本文マージンではなく、divの周りの境界線

もう一つの解決策 - 私はちょうど私のページの縁の周りに単純な境界線が欲しかった、そして、私はコンテンツがそれよりも小さいときに100%の高さが欲しかった。

ボーダーボックスは機能せず、そのような簡単な必要性のために固定配置が間違っているように見えました。

私はページの本文の余白に頼るのではなく、コンテナに境界線を追加することになりました。

body, html {
    height: 100%;
    margin: 0;
}

.container {
    width: 100%;
    min-height: 100%;
    border: 8px solid #564333;
}

w3c仕様によれば、高さは、たとえば1280x1024ピクセル解像度のモニタで100%高さ= 1024ピクセルの可視領域の高さを指します。

最小高さとは、コンテンツを含むページの全高を意味します。コンテンツが1024px分よりも大きいページ:100%はすべてのコンテンツを含むように伸びます。

もう1つの問題は、ie6以外の現代のブラウザでは、高さと幅に余白と枠が追加されてしまうことです(つまり、実際はかなり論理的ですが、仕様に準拠していません)。 これをボックスモデルといいます。 したがって、指定した場合

min-height: 100%;
padding: 5px; 

それは実際にあなたに100%+ 5px + 5pxの高さを与えます。 これを回避するには、ラッパー・コンテナが必要です。

<style>
    .FullHeight { 
       height: auto !important; /* ie 6 will ignore this */
       height: 100%;            /* ie 6 will use this instead of min-height */
       min-height: 100%;        /* ie 6 will ignore this */
    }

    .Padded {
       padding: 5px;
    }
</style>

<div class="FullHeight">
   <div class="Padded">
      Hello i am padded.
   </div
</div>

これはCSSの完全な奇妙なものの一つです - 私はまだ推論を理解していません(誰かが知っていれば、説明します)。

100%はコンテナの高さの100%を意味します。マージン、ボーダー、パディングが追加されます。 したがって、親を塗りつぶし、マージン、境界線、またはパディングを持つコンテナを取得することは事実上不可能です。

また、高さを設定することはブラウザ間でも矛盾していることにも注意してください。

これを投稿して以来私が学んだもう一つのことは、パーセンテージがコンテナの長さに比例していることです。すなわち、幅です。

今日では、vhとvwのビューポート単位はより便利ですが、トップレベルのコンテナ以外には特に有用ではありません。


それは2018年です。問題はGoogleでポップアップし続けるので、新しいホットな話をここで言及する必要があります。

flexboxflexbox作業中)をflexboxたソリューション:( またはjsfiddleで表示する

<html>
  <style>
    html, body {
      height: 100%; /* fix for IE11, not needed for chrome/ff */
      margin: 0; /* CSS-reset for chrome */
    }
  </style>
  <body style="display: flex;">
    <div style="background-color: black; flex: 1; margin: 25px;"></div>
  </body>
</html>

CSS-resetは実際の問題では必ずしも重要ではありません)。

重要な部分はflex: 1display: flex組み合わせdisplay: flex親のdisplay: flex )。 面白いことに、Flexプロパティがどのように機能するかについて私が知っている最も説得力のある説明は、反応的なネイティブドキュメントから来ているので、とにかくそれを参照します


フランクの例は私をちょっと混乱させました - 私は十分にポジショニングを理解していなかったので、私の場合はうまくいきませんでした。 親コンテナ要素は非静的な位置を持つ必要があることに注意することが重要です(これについては触れましたが、見落としてしまいました)。

ここでは、子供が指定した詰め物と境界線が親の100%を埋めるために絶対配置を使用する例を示します。 親は、通常の流れにとどまっている間に子供の位置の参照点を提供するために相対的な配置を使用する - 次の要素「より多くの内容」は影響を受けない:

#box {
    position: relative;
    height: 300px;
    width: 600px;
}

#box p {
    position: absolute;
    border-style: dashed;
    padding: 1em;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
<div id="box">
  <p>100% height and width!</p>
</div>
<div id="more-content">
</div>

CSSの配置をすばやく学習するための便利なlink


ボックスモデルが幅と高さを計算する方法を変更するために使うことができるCSS3の新しいプロパティがあります。これはボックスサイズと呼ばれます。

このプロパティを値 "border-box"で設定することにより、パディングまたはボーダーを追加するときに、ストレッチしないように要素を適用します。 100px幅と10pxパディングを定義すると、100px幅になります。

box-sizing: border-box;

ブラウザのサポートについては、こちらを参照してください 。 IE7以下では動作しませんが、私はDean EdwardのIE7.jsがそれをサポートしているとIE7.jsます。 楽しい :)


別の解決策:マージンとサイズのパーセンテージ単位を使用することができます。 例えば:

.fullWidthPlusMargin {
    width: 98%;
    margin: 1%;
}

ここでの主な問題は、マージンが親要素のサイズによってわずかに増減することです。 おそらくあなたが望む機能は、マージンを一定に保ち、スペーシングの変化を埋めるために子要素を拡大/縮小することです。 だから、あなたのディスプレイがどれくらい緊密であるかによっては、問題があるかもしれません。 (私は0.3%のような小さなマージンも出したいと思う)。


私は " PRO HTMLとCSS Design Patterns "を読んで、こういうことをする方法を学びました。 display:blockdivデフォルトの表示値ですが、明示的にしたいと思います。 コンテナは正しいタイプでなければなりません。 position属性はfixedrelativeabsoluteいずれかです。

.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>

Nooshuのcomment by Fiddle


  <style type="text/css">
.stretchedToMargin {
    position:absolute;
    width:100%;
    height:100%;

}
</style>




css