[CSS] height: 100%; を感覚的にやってみた...!!

:::note warn
2024/06/22 追記:
レイアウトが崩れてしまう、または要素が画面から消えてしまう可能性のあるミスを訂正しました。
詳細は[4.cssで書いたバージョン](#4cssで書いたバージョン)を参照してください。
:::
はじめましての人も多いと思います、こんにちは。CodeByDeerです！
これが2回目の投稿なので、まだ慣れていない所があります。
なにかフィードバックがあれば[twitter - @codebydeer](https://x.com/codebydeer
)にDMなどをいただければありがたいです!

https://x.com/codebydeer

### #目次

[1.やりたいことは何か](#1やりたいことは何か)
[2.まずは探してみる](#2まずは探してみる)
[3.結論...?](#3結論)
[4.cssで書いたバージョン](#4cssで書いたバージョン)
[5.最後に](#5さいごに)
# 1.やりたいことは何か
では早速本題に入っていきます。
まずは、具体的にどういうことをしたいかを事前に明確化しておきます。<br>
こういうことです↓
```
==============================
　　[高さが変動するボックス]　　　　　↑
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝　　 |
　　　　　　　　↑　　　　   　　　viewHeight
[高さを100%で調整したいボックス]    　 |
　　　　　　　　↓　　　　　　　　　　↓
==============================
```
# 2.まずは探してみる

まずはググってみました。
見つけた記事がこちら↓

https://qiita.com/shouchida/items/205fed63b886681661bd

この記事を見て、試しに実装してみるんですが、、、
<br>
～～～～～～～～～～～～
```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>テスト</title>
</head>
<body style="height: 100vh; margin: 0;">
    <textarea style="display: block; margin: 10px auto;" placeholder="てきすとあれあ"></textarea>
    <hr>
    <img style="height: 100%; aspect-ratio: 1/1; border: 1px solid black;" src="https://codebydeer.cloudfree.jp/favicon.ico">
</body>
</html>
```
```body```に```height: 100vh```を、```img```に```height: 100%```を指定する
(わかりやすいように(?) style属性から直接書きました)

結果がこんな感じ↓

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2521024/e4642cec-a777-a585-a2b2-e64e4a5a0686.png)
(firefoxの 開発者ツール + レスポンシブデザインモード )

～～～～～～～～～～～～

うーん、、、うまくいきませんね。
<br>
さて、これは何がいけないかというと、

...というか言うまでもないですね。<br>
そう、```height: 100%```は、親要素の高さを固定にしてそれに合わせて変動するわけではなく、親要素と全く同じ高さにするということなのです。

# 3.結論...?

親要素を```flex```にしちゃえばよくね...?

ってことで、やってみます。

```diff_html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>テスト</title>
</head>
- <body style="height: 100vh; margin: 0;">
+ <body style="height: 100vh; margin: 0; display: flex; flex-flow: column nowrap;">
    <textarea style="display: block; margin: 10px auto;" placeholder="てきすとあれあ"></textarea>
    <hr>
- <img style="height: 100%; aspect-ratio: 1/1; border: 1px solid black;" src="https://codebydeer.cloudfree.jp/favicon.ico">
+ <img style="height: 100%; aspect-ratio: 1/1; border: 1px solid black; flex-grow: 1;" src="https://codebydeer.cloudfree.jp/favicon.ico">
</body>
</html>
```
```flex-grow```を使って、うまく引き伸ばしてみます。

結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2521024/da9e4b5c-5a43-b47b-c679-074e6f9216f6.png)

目的は果たせたけど...

そうじゃない！！

→```img```要素に```aspect-ratio```を指定してるなら、ブロックで囲ってあげればいいのでは！？

ってことで

```diff_html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>テスト</title>
</head>
<body style="height: 100vh; margin: 0; display: flex; flex-flow: column nowrap;">
    <textarea style="display: block; margin: 10px auto;" placeholder="てきすとあれあ"></textarea>
    <hr>
+     <div style="flex-grow: 1;">
            <img style="height: 100%; aspect-ratio: 1/1; border: 1px solid black;" src="https://codebydeer.cloudfree.jp/favicon.ico">
+     </div>
</body>
</html>
```
結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2521024/1ca4ca1c-4ae6-745c-5389-9c242bae14ce.png)

うまくいきました！

・・・
まぁ、うまくは行きましたが。。。
flexを使わないといけないってのと、
かなり注意しないとすぐレイアウトが崩れそうです...
あと、```div```の中に```img```を置いた時のオーバーフローがすっごく気になりました。
そもそもインライン要素になってるときの```img```要素って本当にサイズがバグってるんですよね...
```a```タグと合わせたときとか特に最悪です。

...おっと、話が脱線しましたね、戻しましょう。

# 4.cssで書いたバージョン
CSSで書いたらもっときれいにできそうです。
ってことで最後に、CSSで書いたバージョンを置いておきます。

というかこれが最終的な結論です！

:::note warn
2024/06/22 追記:
```body```要素の```flex-wrap```(```flex-flow```の第二引数)を```nowrap```に直しました。
というのは、コンテンツがサイズ的にオーバーフローしていた場合、次の行に移って見えなくなっていました。
以前の記事を見て実装している方はご注意ください。
:::

<details open><summary>CSSで書いた最終的なスタイルシート</summary>

```html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>テスト</title>
</head>

<body style="margin: 0;">
    <div>
        <textarea rows="4" placeholder="てきすとあれあ"></textarea>
        <hr>
    </div>
    <div class="grow">
        <img id="icon" src="https://codebydeer.cloudfree.jp/favicon.ico">
    </div>
    <style>
        body {
            width: 100%;
            height: 100vh;
            display: flex;
            flex-flow: column nowrap;    /*  wrap => nowrap (2024/06/22 訂正)  */
        }
        body > .grow {
            flex-grow: 1;
            overflow: auto;
        }

        textarea {
            display: block;
            margin: 10px auto;
        }
        #icon {
            display: block;
            height: calc(100% - 2px);
            aspect-ratio: 1/1;
            border: 1px solid black;
        }
    </style>
</body>

</html>
```
</details>
こうやってみると意外とシンプルでしたね。

ところで、これを使う注意点としては
・```flex```直下は```div```で括る
・勝手に伸びてほしくない(指定した高さにしたい)要素には```flex-grow```は与えないようにする
　→伸びてほしいものに```grow```クラスを付ける
 ・横幅管理はしっかりとする
 ・他のスタイルシートと併せて使用する場合は、[詳細度](https://developer.mozilla.org/ja/docs/Web/CSS/Specificity)に注意
ってことです。
# 5.さいごに
今回の記事は、すごく回りくどい書き方をしたような気がします...
わかりづらかったらごめんなさい🙇
てかそもそも```display: grid;```を使えって話ですよね、、
また今度しっかりとグリッドを学びなおして、そのときに記事にできたらなと思います!
そして、最後までお読みくださり、ありがとうございました！

それでは、また会いましょう！👋