如何自填充高度，高手来帮帮忙 ，进来看一看
如图一个主体里有4个div层。主体高度为百分之百，如何让3将剩余箭头处的空余地方补齐，就是把灰色挤下去。绿色粉色和灰色的高度为固定...
如图一个主体里有4个div层。主体高度为百分之百，如何让3将剩余箭头处的空余地方补齐，就是把灰色挤下去。绿色粉色和灰色的高度为固定
展开
3个回答
展开全部
jquery方法，仅供参考
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
div{width: 80%;}
.g{background-color: #ccc;height: 100px;}
.b{background-color: blue;height: 50px;}
.r{background-color: red;height: 50px;}
</style>
<div class="g"></div>
<div class="b"></div>
<div class="a"></div>
<div class="r"></div>
<script type="text/javascript">
$(function(){
var h = $("body").height();
var a_height = h-$(".g").height()-$(".b").height()-$(".r").height();
if(a_height>0) $(".a").height(a_height);
});
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用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>
我也不是很懂这个属性，大概实现了这个效果。可以去百度一下这个属性。
这个属性兼容还有一些问题。
还有就是使用js计算出最后一个div的高度，这个应该不存在什么兼容问题
追问
这样的js需要搜什么 有没有好些的推荐下谢谢
怎么这个效果了
好难弄
追答
引用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的高度了。这样加起来正好等于整个文档的高度，不会出现滚动条。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
既然绿色粉色和灰色的高度为固定，可以计算好3的高度
在css里面设置height的百分比
在css里面设置height的百分比
追问
首先谢谢您的回答
但是我想要的效果是不同浏览器兼容 毕竟浏览器默认高度是不同的换一个就又空出来 或者是多出来滚动条了！
帮忙想想办法，谢谢
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
