请问html前端高手，使用bootsrap的响应式如何实现div适应不同的屏幕大小？
比如：我有这样一个需求：做一个网页，头部横条高度固定，底部高度固定，中间的div的高度为全屏剩余的高度，它要随不同屏幕的设备高度而变化；同理宽度也是一样，中间区域从横向看...
比如：我有这样一个需求：做一个网页，头部横条高度固定，底部高度固定，中间的div的高度为全屏剩余的高度，它要随不同屏幕的设备高度而变化；同理宽度也是一样，中间区域从横向看分为左右，左边的导航宽度和右边主区域的比例为1:6，请问这个如何实现啊？谁能为我写过demo最好，感激不尽了
展开
2个回答
展开全部
html,body{height:100%}
中间div必须为body子元素{height:calc(100% - 头部高度 - 底部高度)}
左边div{width:14%} 右边div{width:86%}
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
我用了jq去写了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
*{
margin:0px;
padding:0px;
border:0px;
}
.top{
height:50px;
background:darkorange;
}
.bottom{
height:60px;
background:#D43F3A;
}
.conleft{
float:left;
width:16.7%;
height:100%;
background:#1E90FF;
}
.conright{
float:right;
width:83.3%;
height:100%;
background:#1B6D85;
}
</style>
</head>
<body>
<div class="box">
<div class="top"></div>
<div class="content">
<div class="conleft"></div>
<div class="conright"></div>
</div>
<div class="bottom"></div>
</div>
<script>
$(function(){
function conhei(){
var tophei = $(".top").height();
var bottom = $(".bottom").height()
var conhei = $(window).height() - tophei - bottom;
$(".content").height(conhei)
console.log(conhei)
}
$(window).resize(function(){
conhei()
})
conhei()
})
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
