【HTML/CSS】2つの表示エリアを可変にする方法

Question

いつも勉強させていただいております。

以下の画像の様に、
ブラウザで赤丸の部分を掴みながら上スクロールすると、
領域Bが広がるようなレイアウトを作りたいのですが、
この様なレイアウトは「通称」などありますでしょうか？

※「ハンバーガーメニュー」とはまた違いますよね...？

作成する上で、何か参考になる情報があればと思い、質問させていただきました。
何卒よろしくお願い致します。

Comments

[K_3578]

領域AとB合わせて画面全体になるって事ですか？

[ami613]

はい、仰る通りです！

1つの画面の中に「領域A」と「領域B」があり、
ユーザー側でそれぞれの表示領域を調整できる...
といったイメージです。

わかりにくく、すみません;

[K_3578]

レイアウト･･･というよりかはHTML5で廃止されるまであったFramesetっぽい気がする･･･。

追記
https://www.conifer.jp/html5-frameset.html
↑みたいな動作だったらHTML5だと難しいかもしれないです。
私が知らないだけかもしれませんが･･･。

Answer 1

この様なレイアウトは「通称」などありますでしょうか？

「スプリットペイン」とかでしょうか？　ピュアCSSでは難しいと思います。

jQueryでスプリットペイン - JoTech

---

とりあえず、CSSで頑張ってみましたが、リサイズをするマーカー？が右端にしか出せないかもです。
やはり、JavaScriptが必須かもしれません。

サンプル

.container{
  height: 200px;
  display: flex;
  flex-direction: column;
}
.item{
  overflow: hidden;
  flex: 1 1 auto;
}
.item:first-child{
  flex: 0 1 auto;
  resize: vertical;
  overflow: hidden;
}

---

Chrome ならそれっぽく見えるかなあ……

サンプル2