stretch
stretch キーワードは width や height プロパティで使用し、要素を親コンテナの利用可能なスペースいっぱいに拡張します。従来の width: 100% とは異なり、マージンやパディングを考慮した上で残りのスペースを埋めます。レスポンシブレイアウトでの柔軟なサイズ指定に役立ちます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.properties.height.stretch | 138 | 138 | 146 | 9 | 138 | 9 |
| CSS プロパティ | ||||||
stretch | 138 | 138 | | 9 | 138 | 9 |
stretch | 138 | 138 | | 7 | 138 | 7 |
stretch | 138 | 138 | | 9 | 138 | 9 |
stretch | 138 | 138 | | 7 | 138 | 7 |
stretch | 138 | 138 | 146 | 7 | 138 | 7 |
注釈 1件
対応条件
- 以前は別名で対応していました: -webkit-fill-available (28)
注釈 1件
対応条件
- 以前は別名で対応していました: -webkit-fill-available (79)
注釈 1件
対応条件
- 以前は別名で対応していました: -webkit-fill-available (28)
注釈 1件
対応条件
- 以前は別名で対応していました: -webkit-fill-available (28)
注釈 1件
対応条件
- 以前は別名で対応していました: -webkit-fill-available (79)
注釈 1件
対応条件
- 以前は別名で対応していました: -webkit-fill-available (28)
注釈 1件
対応条件
- 以前は別名で対応していました: -webkit-fill-available (22)
注釈 1件
対応条件
- 以前は別名で対応していました: -webkit-fill-available (79)
注釈 1件
対応条件
- 以前は別名で対応していました: -webkit-fill-available (25)
注釈 1件
対応条件
- 以前は別名で対応していました: -webkit-fill-available (28)
注釈 1件
対応条件
- 以前は別名で対応していました: -webkit-fill-available (79)
注釈 1件
対応条件
- 以前は別名で対応していました: -webkit-fill-available (28)
注釈 1件
対応条件
- 以前は別名で対応していました: -webkit-fill-available (22)
注釈 1件
対応条件
- 以前は別名で対応していました: -webkit-fill-available (79)
注釈 1件
対応条件
- 以前は別名で対応していました: -webkit-fill-available (25)
注釈 1件
対応条件
- 以前は別名で対応していました: -webkit-fill-available (22)
注釈 1件
対応条件
- 以前は別名で対応していました: -webkit-fill-available (79)
注釈 1件
対応条件
- 以前は別名で対応していました: -webkit-fill-available (25)
基本構文
CSS
.fill-container {
width: stretch;
height: stretch;
}ライブデモ
実務での使いどころ
-
コンテナ全体への拡張
マージンやパディングを考慮しつつ、親要素の利用可能なスペースを完全に埋める要素を作成します。
注意点
- ブラウザサポートが限定的であり、-webkit-fill-available などのプレフィックス付きプロパティをフォールバックとして併用する必要があります。
アクセシビリティ
- 要素のサイズが動的に変わるため、コンテンツがはみ出さないよう overflow の処理を適切に行ってください。