网页中如何设置元素和外部容器的间距而不影响同级元素？
我现在遇到一个问题，如图所示，在一个div中嵌套有两个同级的div，div2的高度和位置是固定的，div1需要自动调整大小填充剩下的空间，我的思路是设置div1和外部容器div的底部间距为div2的高度，这样div2就能始终处于div的底部并且全部显示出来。（因为打开网页的显示器的大小不同，所以高度不能写死，也不能用百分比）可是实际操作的时候我发现了一个问题，我所知的设置间距的方式只有margin和padding，而这两个方法一个是设置和同级元素间距的，一个是设置元素内部间距的，似乎都不能实现我的想法，请问是否有这样一个方法可以设置元素和外部容器之间的间距？如果没有的话，请问我需要的这种效果要怎样的一种思路去实现？
简单的理一下你的需求div（表示最外层的父div）和div1不定高，div2的高度是固定的。需要实现的效果是div1自动填满div除去div2的高度。
你可以这样
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.parent{
position: relative;
box-sizing: border-box;
padding-bottom: 100px;
height: auto;
width: 200px;
border:1px solid red;
}
.div1{
width: 100%;
height: 100%;
border:1px solid green;
}
.div2{
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
border:1px solid blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="div1">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
<div class="div2"></div>
</div>
</body>
</html>
温馨提示：答案为网友推荐，仅供参考
相似回答