布局(左边的div随着右边div的高度变化而变化)

Posted 未来-竭尽全力

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了布局(左边的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>

以上是关于布局(左边的div随着右边div的高度变化而变化)的主要内容,如果未能解决你的问题,请参考以下文章

css中如何实现左边的高度随着右边改变而改变

设置DIV最小高度以及高度自适应随着内容的变化而变化

div宽度随屏幕大小变化

在css中height:100%;不起作用!

左边label随着右边textarea高度自适应

DIV+CSS布局问题 100%的页面上边固定高度下面div:height100%填充为左右结构左边固定宽度右边width:100%