用display:box;布局
<!DOCYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>window.navigator</title>
<style>
body{
margin: 0px;
padding: 0px;
width: 100%;
}
.main{
display: box;
display: -moz-box;
display: -webkit-box;
box-orient:vertical;
-moz-box-orient:vertical;
-webkit-box-orient:vertical;
width: 100%;
height: 100%;
background-color: green;
}
.main div{
margin: 0px auto;
width: 90%;
}
.div1{
height:100px;
background-color: red;
}
.div2{
height:100px;
background-color: blue;
}
.div3{
height:100px;
background-color: gray;
}
.div4{
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
height:100px;
background-color: black;
}
</style>
</head>
<body>
<div class="main">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</div>
</body>
</html>
我也不是很懂这个属性,大概实现了这个效果。可以去百度一下这个属性。
![](https://video.ask-data.xyz/img.php?b=https://iknow-pic.cdn.bcebos.com/4b90f603738da977673310feb651f8198718e3c3?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_auto)
这个属性兼容还有一些问题。
还有就是使用js计算出最后一个div的高度,这个应该不存在什么兼容问题
追问这样的js需要搜什么 有没有好些的推荐下谢谢
![](https://video.ask-data.xyz/img.php?b=https://iknow-pic.cdn.bcebos.com/562c11dfa9ec8a131c01c735f103918fa1ecc0c8?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_auto)
怎么这个效果了
好难弄
追答引用jq库,然后
<!DOCYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>window.navigator</title>
<script type="text/javascript" src="
<style>
body{margin: 0px;padding: 0px;width: 100%;}
.main{width: 100%;height: 100%;background-color: green;}
.main div{margin: 0px auto;width: 90%;}
.div1{ height:100px;background-color: red;}
.div2{ height:100px;background-color: blue;}
.div3{height:100px;background-color: gray; }
.div4{height:100px;background-color: black;}
</style>
<script type="text/javascript">
$(function(){
$(".div4").height($("body").height()-$(".div1").height()-$(".div2").height()-$(".div3").height());
});
</script>
</head>
<body>
<div class="main">
<div class="div1"></div><div class="div2"></div><div class="div3"></div><div class="div4"></div>
</div>
</body>
</html>
js可以通过DOM操作元素,修改元素属性或者CSS属性。原理就是用整个窗口的高度截取前面三个div的高度,剩下的就是第四个div的高度了。这样加起来正好等于整个文档的高度,不会出现滚动条。
本回答被提问者采纳