CSS 100％高さとパディング/マージン

813

HTML / CSSを使用して、親要素の100％の幅または高さ、あるいはその両方を持ち、適切なパディングまたはマージンがある要素を作成するにはどうすればよいですか？

「適切な」とは、親要素が200px高く、指定height = 100%した場合、親要素の中央にうまく配置された、すべての側面に高い要素がpadding = 5px必要になることを期待することを意味します。190pxborder = 5px

今、私はそれが標準のボックスモデルがそれが機能することを指定する方法ではないことを知っています（理由を正確に知りたいのですが...）、それで明白な答えは機能しません：

#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ピクセルのパディングが表示されるようにブラックボックスを表示します。

css 
— 東寺
ソース
私はこれらの2つのソリューションが最も信頼できることを発見しました：http: //www.xs4all.nl/~peterned/examples/csslayout1.html http://themaninblue.com/experiment/footerStickAlt/特定のHTML見て遊べる？
— Nick Presta
— ベン

回答:

755

「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>
スニペットを展開

Nooshuのコメントによるフィドル

— フランク・シュヴィーターマン
ソース
42
優れたソリューションは、これをブックマークすることです。ライブデモを希望する人のために、すぐにjsfiddle.net/Rpdr9に追加しました。よろしくお願いします。
— Nooshu
16
@TojiはIEの互換性を気にしていませんでしたが、残念ながら気にしなくてはなりませんでした。このソリューションは、当初IE6では機能しませんでした。Dean EdwardsのIE9.jsをページに追加すると、この作業が可能になりました。今、私は希望して、相対/絶対配置が子要素の何かにねじ込まれないことを願って祈る必要があります...
— クリストファー・パーカー
24
-1（ここでは少数派のようですが：P）。これは、ボックスを絶対配置できることを前提としています。人々はすでにpos：absを使いすぎているため、この弾薬は必要ありません。この例を見てみましょう：div "panels"クラス内に複数のdiv "panel"が含まれています。「パネル」には{overflow：hidden; height：300px;}、および「panel」にはさまざまなcontent / content-heightがあり、{border：＃000 solid 1px; float：left; margin-right：10px;}。すべての「パネル」の高さを「パネル」の高さにします。「パネル」divは、ここではpos：absにすることはできません。ただし、@ Marcoのソリューションはこのシナリオで機能します。
— eternicode、2011年
8
わあ、わかった。top:0、bottom:0要素うち、基本的に「ストレッチ」。私はそれだけで動作させることができposition:absoluteます
— Matt
7
top:20px;bottom:20px;left:20px;right:20px;余白をまったく使用する代わりに、単に実行できませんか？
— Chowey 2013年
391

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

このプロパティを値「border-box」で設定することにより、パディングまたはボーダーを追加するときに、適用する要素が伸縮しないようにします。幅が100px、パディングが10pxの何かを定義しても、幅は100pxのままです。

box-sizing: border-box;

ブラウザのサポートについては、こちらをご覧ください。IE7以下では機能しませんが、Dean EdwardのIE7.jsがサポートを追加すると思います。楽しい ：）

— マルコ・ハルディム
ソース
45
最終的に！私はこの正確な機能を約10年間待っていました。Pity IE7はそれをサポートしていませんが、IEをまだ使用している人は美しいレイアウトに値しないといつも思っています。
— cronoklee 2012年
2
これはiPhone / SafariとAndroidのデフォルトのブラウザーで機能しましたが、上記の絶対配置ソリューションは機能しませんでした。
— Spud
18
これは基本的にIEの癖モードボックスモデルと同じです。誰もがIEを嫌うのは面白いことですが、今border-boxはみんなのヒーローです:)
— Matt Greer
14
参考までに、box-sizingのブラウザプレフィックスは、-mozを除くすべてで削除されました。良い議論については、
— paulirish.com / 2012 / box
3
はい！これが正解です。100％の高さは、こぼれることなく、親を基準にして正しくスケーリングされます。できれば100万の+1を与えるでしょう。
— Andrew Mao
65

解決策は、高さと幅をまったく使用しないことです！上、左、右、下を使用して内側のボックスを取り付け、マージンを追加します。

.box {margin:8px; position:absolute; top:0; left:0; right:0; bottom:0}
<div class="box" style="background:black">
  <div class="box" style="background:green">
    <div class="box" style="background:lightblue">
      This will show three nested boxes. Try resizing browser to see they remain nested properly.
    </div>
  </div>
</div>
スニペットを展開

— アモルク
ソース
6
あなたが技術的に正しいので賛成票を投じますが、それは基本的にフランクのものと同じ答えでもあります（私はそこのだらしないブラウザに少し友好的だと思います。）
— Toji
39

より良い方法は、calc（）プロパティを使用することです。したがって、あなたのケースは次のようになります：

#myDiv {
    width: calc(100% - 5px);
    height: calc(100% - 5px);
    padding: 5px;
}

シンプル、クリーン、回避策なし。値と演算子の間のスペースを忘れないようにしてください（たとえば(100%-5px)、構文が壊れます。お楽しみください！）。

— ブライアンアデラー
ソース
6
素晴らしい解決策。ブラウザのサポートを確認することを忘れないでください：calc（）を使用できますか
— Brett Postin
5
パディングによって要素の幅がそれぞれ10px広くなり、大きくなるため、これにより実際にはそれぞれ5pxのパディングごとに100％の幅と高さが得られませんか？
最後に、他のソリューションとは異なり、上、右、下、左を0になるように配置するのが良い解決策です。これは位置でのみ機能します。
— Gil Epshtain
私は正しいと思います：#myDiv {width：calc（100％-10px）; 高さ：calc（100％-10px）; パディング：5px; }左から5、右から5 = 10、上から5、下から5 = 10
— Chris P
21

w3c仕様によると、高さは表示可能な領域の高さを指します。たとえば、解像度1280x1024ピクセルのモニターでは、100％の高さ= 1024ピクセルです。

min-heightは、コンテンツを含むページの全体の高さを指し、コンテンツが1024pxより大きいページでは、min-height：100％はすべてのコンテンツを含むように拡大します。

もう1つの問題は、ie6を除くほとんどの最新のブラウザーで高さと幅にパディングとボーダーが追加されることです（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>
— アレックス
ソース
4
@Alex：しかし、内側のdiv（パッド付きのdiv）が外側のdivの高さの100％になるのは何ですか。私の経験では、大きなフルハイトのdivの中に少し短いdivが入るだけです。
— Lawrence Dol、
8

1.全高 padding

body {
  margin: 0;
}
.container {
  min-height: 100vh;
  padding: 50px;
  box-sizing: border-box;
  background: silver;
}
<div class="container">Hello world.</div>
スニペットを展開

2.全高 margin

body {
  margin: 0;
}
.container {
  min-height: calc(100vh - 100px);
  margin: 50px;
  background: silver;
}
<div class="container">Hello world.</div>
スニペットを展開

3.全高 border

body {
  margin: 0;
}
.container {
  min-height: 100vh;
  border: 50px solid pink;
  box-sizing: border-box;
  background: silver;
}
<div class="container">Hello world.</div>
スニペットを展開

— ステッカー
ソース
7

これは、CSSの明白なバカの1つです-私はまだその理由を理解していません（誰かが知っている場合は、説明してください）。

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

また、高さの設定がブラウザ間で一貫していないことでも有名です。

これを投稿してから私が学んだもう1つのことは、パーセンテージはコンテナの長さ（つまり幅）に相対的であるため、高さのパーセンテージはさらに価値がないということです。

現在、vhおよびvwビューポートユニットはより有用ですが、トップレベルのコンテナー以外には特に有用ではありません。

— ローレンス・ドル
ソース
理由はありません。ブラウザが一貫した動作に収束し始めたときに起こったことだけです。私の返答で言及された本をチェックしてください。
— フランクシュヴィーターマン
正しい用語を使用することに賛成。Texと私が見たすべてのレイアウトマネージャーは正しく、CSSは特別でなければなりません。
— maaartinus 2018
5

別の解決策は、異なるボックスモデルの動作を持つdisplay：tableを使用することです。

親に高さと幅を設定し、拡張せずにパディングを追加できます。子は、100％の高さと幅からパディングを差し引いたものです。

JSBIN

別のオプションは、ボックスサイズのプロパティを使用することです。両方の問題は、IE7では機能しないことだけです。

— user1721135
ソース
4

別の解決策：マージンとサイズにパーセント単位を使用できます。例えば：

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

ここでの主な問題は、マージンが親要素のサイズとともにわずかに増減することです。おそらく望ましい機能は、マージンを一定に保ち、子要素を拡大/縮小して間隔の変更を埋めることです。したがって、ディスプレイをどの程度タイトにする必要があるかに応じて、問題が発生する可能性があります。（私はまた、0.3％のような小さなマージンを求めます）。

— ktbiz
ソース
3

フレックスボックスを使用したソリューション（IE11で動作）：（または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リセットは、実際の問題にとって必ずしも重要ではありません。）

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

（...）flex：1、使用可能なすべてのスペースを埋めるようにコンポーネントに指示し、同じ親を持つ他のコンポーネント間で均等に共有します

— Putzi San
ソース
2

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

子-与えられたパディングとボーダー-が絶対配置を使用して親を100％埋める例を次に示します。親は相対配置を使用して、通常のフローを維持しながら子の位置の参照ポイントを提供します。次の要素「more-content」は影響を受けません。

#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の配置をすばやく学習するための便利なリンク

— ピーター・ツェン
ソース
0

ページ本文のマージンではなく、divの周囲のボーダー

別の解決策-ページの端の周りに単純な境界線が必要で、コンテンツがそれよりも小さい場合は100％の高さにしたかったのです。

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

ページの本文のマージンに依存する代わりに、コンテナに境界線を追加することになりました-これは次のようになります：

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

.container {
    width: 100%;
    min-height: 100%;
    border: 8px solid #564333;
}
— クリス・ランドール
ソース
0

これは、display: block2020年に修正できる最速の方法であるデフォルトの動作です。display: 'flex'親要素とパディング（例：20px ）を設定すると、すべての子の高さが100％になります。

— フリースタイル09
ソース
0

-webkitと-mozを追加する方が適切です

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
— user3113626
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.