今天同学问了一个左边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>
时间： 2024-08-06 20:06:45