web-dev-qa-db-ja.com

コンテナを埋めるためのCSSの配置：幅と左/右？

検討中：

  • 比較的配置されたコンテナ内に絶対的に配置されている要素の場合。
  • 要素がコンテナの幅を満たすようにしたい場合。
  • 要素も下揃えです。

enter image description here

ブラウザの互換性を最大限に高めるには、要素に ピクセル単位のwidthを設定する 、または単に leftとright を使用するのが最善ですか？

どちらの方法でも注意すべき一般的なバグはありますか？

明らかに、left: 0;とright: 0;を使用すると、画像の幅やパディングが変更された場合にコードが管理しやすくなりますが、代わりにwidth: 300pxが有利になるという欠点はありますか？

csscross-browserwidthcss-position
18
Baumr

歴史的に、IE6は同じ軸の2つのプロパティを同時にサポートしていなかったため、_left & right_の代わりにwidthを使用することを学びました。

_<div style="top:0;bottom:0;position:absolute;">modern browsers</div>

<div style="top:0;height:100%;position:absolute;">MSIE6</div>

<div style="left:0;right:0;position:absolute;">modern browsers</div>

<div style="left:0;width:100%;position:absolute;">MSIE6</div>

<div style="left:0;right:0;top:0;bottom:0;position:absolute;">modern browsers</div>

<div style="left:0;top:0;height:100%;width:100%;position:absolute;">MSIE6</div>
_

また、この手法は一部の要素では機能しません（ 最新のブラウザを含む、仕様による ）

_<!-- these will not work -->
<!-- edit: on some browsers they may work,
but it's not standard, so don't rely on this -->

<iframe src="" style="position:absolute;top:0;bottom:0;left:0;right:0;"></iframe>

<textarea style="position:absolute;top:0;bottom:0;left:0;right:0;"></textarea>

<input type="text" style="position:absolute;left:0;right:0;">

<button ... ></button>

and possibly others... (some of these can't even be display:block)
_

ただし、_width:auto_プロパティを使用して、通常の静的フローで何が起こるかを分析します。

_<div style="width:auto;padding:20px;margin:20px;background:Lime;">a</div>
_

あなたはそれが非常に似ているのを見るでしょう...

_<div style="width:auto;padding:20px;margin:20px;background:Lime;
    position:absolute;top:0;left:0;bottom:0;right:0;">b</div>
_

...同じ値を持つ同じプロパティ！これは本当にいいです！それ以外の場合は、次のようになります。

_<div style="width:100%;height:100%;
    position:absolute;top:0;left:0;">
    <div style="padding:20px;margin:20px;
        background:Lime;">c</div>
</div>
_

内側のdivがy軸を満たさないため、これも異なります。これを修正するには、css calc()または_box-sizing_と不要な頭痛が必要になります。

私の答えは、_left + right | top + bottom_は静的ポジショニングの_width:auto_に最も近く、使用しない理由がないため、本当にクールです。これらは他の方法に比べてはるかに使いやすく、はるかに多くの機能を提供します（たとえば、1つの要素で_margin-left_、_padding-left_、およびleftを同時に使用します）。

_left + right | top + bottom_は、代替のwidth:100% + box-sizing | calc()と比較して、ブラウザーでのサポートが大幅に向上しており、使いやすさも向上しています。

もちろん、（例のように）要素をy軸でも拡大する必要がない場合は、パディングにネストされた要素を使用して_width:100%_します。これは、MSIE6のサポートをアーカイブする唯一のソリューションです。

だから、あなたのニーズに依存します。 MSIE6をサポートしたい場合（それがそれを行う唯一の実際の理由です）、_with:100%_を使用する必要があります。それ以外の場合は、_left + right_を使用してください。

お役に立てば幸いです。

13
user652649

どちらの方法でも問題ありませんが、レスポンシブまたは携帯電話との互換性を持たせたい場合は、コンテナがLeft:で囲まれていない場合はBottom:と<div>を使用することをお勧めします。

<div>で囲まれている場合は、width: 100%またはmax-width: 200pxを使用して行うと、表示の問題が最も少なくなると思います。

テーマをレスポンシブにしたい場合は、CSSで固定幅を使用しないでください。

0
Arts Fantasy