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

今天同学问了一个左边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>

转载于:https://www.cnblogs.com/hjdjs/p/6388549.html

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

css之左边div固定宽度右边div自适应布局
为什么80%的码农都做不了架构师?>>> 0.要实现的布局的效果图是这样子的: a)外边有个大的div背景为粉红色,包住里面的div,宽度自适应,高度根据里面两个div高度最大 ...
css 实现右边div高度随着左边div内容的增加，右边div的高度也增加（左边div与右边div高度保持一致）
从ajax传回来的数据左边撑开了比较多,右边的数据默认显示在下方,添加css更改位置 <template><div class="indexOne">< ...
两列布局左边定宽，右边自适应
效果图: 代码如下: <html> <head> <title>文章标题</title> <meta http-equiv="Conte ...
列表左边左右固定，右边可以左右滚动，且左右两边列表滚动时上下联动
function funcsrcoll1() { rightdiv.scrollTop = leftdiv.scrollTop;//设置左边的div和右边div上下滚动距离相同,即左右上下滚动联动. ...
html div左中右布局,求助css。一个div包含两个div，左右布局，左边css宽30%，右边div宽70%。高度均自...
求助css. 一个div包含两个div,左右布局,左边css宽30%,右边div宽70%.高度均自以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让 ...
css2列布局，左边div宽度固定，右边div宽度自适应
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
css实现左边div固定宽度，右边div自适应撑满剩下的宽度
(1)使用float <div class="use-float"><div></div><div></div> < ...
记录一下flex布局左边固定，右边100%
通过设置css的代码,来使得布局变成左边固定,右边100% <style> #flex{ display: flex; } #left{ width: 200px; } #right{ b ...
html div文字重叠,div右边的div与其重叠（显示错位）
在排版布局网页时,一行常常分为两列或三列,由于是一个大区块,所以经常使用div来布局,也就是每列用一个div.假如把一行分为两列,一列用于显示文字列表,另一列用于显示图片列表,图文搭配比较好看:在用d ...

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

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

最新文章

热门文章