css布局:右侧内容随左侧高度变化

最新推荐文章于 2024-12-17 15:57:01 发布

原创最新推荐文章于 2024-12-17 15:57:01 发布 · 842 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

css 专栏收录该内容

6 篇文章

订阅专栏

该篇文章描述了一个HTML页面中，使用flex布局实现左侧菜单栏高度自适应，当左侧菜单栏高度增加时，右侧内容块随之动态调整的示例。

左侧菜单栏高度不固定,右侧内容块会随着左侧菜单栏高度而变化

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>右侧随左侧高度变化</title>
    <style>
        .box {
            display: flex;
        }

        .left {
            min-height: 300px;
            width: 200px;
            height: auto;
            background: red;
        }

        .right {
            min-height: 300px;
            width: 1000px;
            height: auto;
            background: green;
        }
    </style>
</head>

<body>
        <div class="box">
            <div class="left">
                <p>王惊涛------------</p>
                <p>王惊涛------------</p>
                <p>王惊涛------------</p>
                <p>王惊涛------------</p>
                <p>王惊涛------------</p>
                <p>王惊涛------------</p>
                <p>王惊涛------------</p>
                <p>王惊涛------------</p>
                <p>王惊涛------------</p>
                <p>王惊涛------------</p>
                <p>王惊涛------------</p>
                <p>王惊涛------------</p>
                <p>王惊涛------------</p>
                <p>王惊涛------------</p>
                <p>王惊涛------------</p>
                <p>王惊涛------------</p>
                <p>王惊涛------------</p>
                <p>王惊涛------------</p>
                <p>王惊涛------------</p>
                <p>王惊涛------------</p>
                <p>王惊涛------------</p>
                <p>王惊涛------------</p>
                <p>王惊涛------------</p>
                <p>王惊涛------------</p>
                <p>王惊涛------------</p>
                <p>王惊涛------------</p>
                <p>王惊涛------------</p>
                <p>王惊涛------------</p>
                <p>王惊涛------------</p>
                <p>王惊涛------------</p>
                <p>王惊涛------------</p>

            </div>
            <div class="right"></div>
        </div>
</body>

</html>