bodyのheightが効かない

前提

chromeの拡張機能をつくっています。
ポップアップを作ったのですが、bodyのサイズを固定しているのにも関わらず制御できません。
div内にtextareaを入れています。

実現したいこと

body内のコンテンツがbodyのheightを超えた時スクロールバーが出るようにしたい

発生している問題・エラーメッセージ

body超えても表示し画面の半分ぐらいに到達したらやっとスクロールバーが出る

該当のソースコード

css
1body {
2    width: 400px;
3    height: 500px;
4    margin: 0;
5    padding: 5px;
6    border: 2px solid rgb(0, 162, 255);
7    background: rgb(218, 238, 255);
8}
9.textarea-style {
10    width: 100%;
11    height: auto;
12    box-sizing: border-box;
13    box-shadow: 0 0 0 1px rgb(128, 230, 255) inset;
14    font-size: 16px;
15    resize: vertical;
16    min-height: 80px;
17    font-family: -apple-system, BlinkMacSystemFont,
18        "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
19}
20.ta-div {
21    width: auto;
22    height: auto;
23    position: relative;
24    margin: 7px auto auto auto
25}

試したこと

overflow-y:scroll → 同じ動作

行動規範の内容に同意します

回答1件

ベストアンサー

~~chromeの拡張機能で実際に試したわけではないので自信ありませんが…~~

css
1body {
2  overflow-y: scroll
3}

~~で、できないでしょうか？~~

（コメント欄のやりとりより抜粋）

bodyにheight指定すると、検証ツールでみてもらったらわかるんですけど、効いてはいると思います。ただoverflow-y:scrollも、backgroundも、bodyのサイズを超えて、画面全体に広がる仕様みたいですね。なので<body>の直下に<div>か何かでコンテンツ全体を囲むコンテイナーをつくって、そちらにheightとoverflow-y:scrollを指定したらいけると思います。

html
1<body>
2  <div class="container">
3  </div>
4</body>

css
1.container {
2  height: 200px; // 例
3  overflow-y: scroll;
4}

投稿2022/11/10 13:42

編集2022/11/10 14:39

Cocode

総合スコア2314

suika-

2022/11/10 13:48

同じ動作でした。問題はoverflowの判定がbodyに設定してあるheightではなく別にあるようです。

Cocode

2022/11/10 13:54

bodyにheight指定すると、検証ツールでみてもらったらわかるんですけど、効いてはいると思います。ただoverflow-y:scrollも、backgroundも、bodyのサイズを超えて、画面全体に広がる仕様みたいですね。なので<body>の直下に<div>か何かでコンテンツ全体を囲むコンテイナーをつくって、そちらにheightとoverflow-y:scrollを指定したらいけると思います。ポップアップウィンドウのサイズを指定したかったらJavaScriptになるのかな。

suika-

2022/11/10 14:18

ありがとうございます。bodyに期待せず、divのみにheightを設定したら解決しました。

Cocode

2022/11/10 14:30

BAありがとうございます。回答も更新しておきます！

行動規範の内容に同意します