首页 > 代码库 > 布局（左边的div随着右边div的高度变化而变化）

布局（左边的div随着右边div的高度变化而变化）

2024-09-03 21:06:06   219人阅读

今天同学问了一个左边div的高度随着右边div的高度变化而变化的问题。开始想了想有点蒙。中间试着用height：100%；试过发现并不可行，因为高度百分比必须有确切的祖先元素（即设置了px）才可以。由于今天晚上正在团建，回来都12点多了。然后怎么也睡不着就做做这个吧，发现一坐下来安心的想问题，竟然迎刃而解了。

我用到的方法是1父元素设置position:relative;2左边的div设置position:absolute;top:0;bottom:0;这个也是css3中flex布局的实现原理。包括左右布局，左边自适应，右边固定等等都可以用类似的原理实现。刚好做了一个小的例子，大家复制粘贴就ok。希望对大家有帮助，也希望大家可以有更好的方法给我留言。感激不尽啊。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            width: 100px;
            height: 50px;
        }

        #big {
            width: 500px;
            height: auto;
            background-color: red;
            position: relative;
        }

        .left {
            width: 200px;
            position: absolute;
            top: 0;
            bottom: 0;
            display: inline-block;
            background-color: yellow;
        }

        .right {
            width: 200px;
            height: auto;
            display: inline-block;
            background-color: green;
        }
    </style>
</head>
<body>
<div id="big">
    <div class="left"></div>
    <div class="right">
        <ul>
            <li>haha</li>
        </ul>
    </div>
</div>
<button id="btn">点击增加</button>
<script>
    var right = document.getElementsByClassName("right")[0];
    document.getElementById("btn").onclick = function () {
        var x = document.createElement("li");
        x.innerText = "hello";
        document.getElementsByClassName("right")[0].getElementsByTagName("ul")[0].appendChild(x);
    }
</script>
</body>
</html>

布局（左边的div随着右边div的高度变化而变化）


联系
我们