CSSのposition:flex;でスクロールしても表示される領域を確保する方法

CSSのposition:flex;でスクロールしても表示される領域を確保する方法

CSSでpositionプロパティは理解するのが難しいです。

position:flex;とすることによってヘッダ領域に表示することができます。

画面が縦長でスクロールがあってもfixedの場合は常に表示されます。

positionを指定した場合は、top,leftを指定することができます。

htmlです。

<div>
  <div class="header">アイテム1</div>
  <div class="main">アイテム2<br>アイテム2</div>
</div>

cssです。

body {
  margin: 0;
  overflow-y: auto; // ブラウザ依存
  overflow-x: hidden;
}

.header{
  position: fixed;
  top: 0; // ブラウザの上からの配置位置
  left: 0;// ブラウザの左からの配置位置
  width: 100%;
  height: 24px;
  background-color: gray;
}

.main {
  padding-top: 24px; // ヘッダーと被るのでヘッダーの高さだけ、下にずらす
  width: 100%;
  height: 5000px;
  border: 1px solid black;
}

このCSSが良いかはわかりませんがとりあえず縦にスクロールがあってもヘッダーを表示することができます。

サンプル

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^