More than 3 years have passed since last update.

CSSで「余っている高さすべて」を指定する

Posted at 2021-01-07

やりたいのは上に説明文があって、残りを画像で埋めたい、みたいなケースです。

Flexible Box Layout を使います。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8"/>
    <style>
        body {
            margin: 0;
        }

        #content {
            display: flex;
            position: absolute;
            flex-direction: column;
            margin: 10px;
            width: 95vw;
            height: 95vh;
        }

        #content>p:last-of-type {
            flex: 1;
            min-height: 100px;
        }

        .image {
            height: 100%;
            max-width: 100%;
        }
    </style>
</head>

<body>
    <div id="content">
        <h1>Flexible Box Layoutのサンプル</h1>
        <ul>
            <li>hogehoge</li>
            <li>fugafuga</li>
        </ul>
        <p><img src="computer_desktop_document.png" class="image"></p>
    </div>
</body>

</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up