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

2

试试下面的代码：

  <!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;
            position: relative;
        }
        .row {
            clear: both;
            margin: 0 -15px;
            overflow: auto;
            position: relative;
            height: 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: 100%; /* not working */
            position: absolute;
            right: 0;
        }
        ul li {
            background: darkred;
        }

        .clearfix:after {
            clear: both;
            content: ".";
            display: block;
            height: 0;
            visibility: hidden;
        }
        .clearfix {
            display: inline-block;
        }
        .clearfix {
            display: block;
        }

    </style>
</head>
<body>
<div class='container clearfix'>
    <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>
于 2015-09-14T13:22:55.643 回答