1

高さ 100% に問題があります。

問題は、横の画像と同じ高さで配布する必要があるアイテムのリストがあることです。固定高さを使用すると正常に機能しますが、パーセンテージを使用すると機能しません。

問題は、サイトがレスポンシブで、画像が固定されないため、固定の高さを設定できないことです。

コードは以下です

<!DOCTYPE html>
<html>
    <head>
        <title>teste flex box</title>
        <style>
            html,body {
                min-height: 100% !important;
                height: 100%;
            }

            body { margin: 0 }
            * { box-sizing: border-box }
            .container {
                width: 600px;
                margin: auto;
            }
            .row {
                clear: both;
                margin: 0 -15px;
                overflow: auto;
            }
            .lateral, ul {
                width: 50%;
                float: left;
                padding: 0 15px;
            }
            img {
                width: 100%
            }
            ul {
                list-style: none;
                margin: 0;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                height: 356px; /* works */
                height: 100%; /* not working */
            }
            ul li {
                height: 50px;
                background: darkred;
            }
        </style>
    </head>
    <body>
        <div class='container'>
            <div class='row'>
                <div class='lateral'><img src='https://placeholdit.imgix.net/~text?txtsize=33&txt=285%C3%97356&w=285&h=356'></div>
                <ul>
                    <li>item 1</li>
                    <li>item 2</li>
                    <li>item 3</li>
                    <li>item 4</li>
                    <li>item 5</li>
                </ul>
            </div>
        </div>
    </body>
</html>

誰が何が起こっているのか知っていますか？ありがとうございました。

4

1 に答える 1