手机分两层，如何设置高度。

sunfor 2015-06-01 04:43:19

在手机UI里，想布局三个DIV，TOP为上部，FOOTER为下部，op_float_bar在TOP里面的底部，请问这个DIV的高度如何设置？
#top { width:100%; height:？？？;}

<body>
<div id="top"> //上层占整个手机的70%高度
<div id="top_float_bar"> //上层里的BAR，在上层的底部，占上层的20%

</div>
</div>
<div id="footer"> //底层占整个手机的30%高度

</div>
</body>

...全文

212 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

KK3K2005 2015-06-03

打赏
举报

html,body{ height:100%;margin:0; overflow:hiden; } #top{ height:70% } #top #top_float_bar{ height:20% } #footer{ height:30% }

sunfor 2015-06-03

打赏
举报

引用 4 楼 dingzongyinnihao 的回复:


<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width,      initial-scale=1.0, user-scalable=no" />

    <title>高度分三块</title>
    <script src="js/jquery-1.9.1.min.js"></script>
  
    <script type="text/javascript">
        $(function () {
            var dqheight = document.documentElement.clientHeight;
            $("#allheight").css("height", dqheight);
        })
    </script>
</head>
<body style="padding:0px; margin:0px;">
    <div id="allheight">
   <div style="height:70%;">
       <div style="height:20%">
           这里是top的20%
       </div>
       这里是50%的内容
   </div>
    <div style="height:30%;">
        这里是底部的30%
    </div>
          </div>
</body>
</html>

就这样就行了，，帮你测试过了

其它上下两个可以，但20%的底部要跟70%的上部的底部对齐，还不行，现20%是在70%的上面的。

我说我行就是行 2015-06-02

打赏
举报


<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width,      initial-scale=1.0, user-scalable=no" />

    <title>高度分三块</title>
    <script src="js/jquery-1.9.1.min.js"></script>
  
    <script type="text/javascript">
        $(function () {
            var dqheight = document.documentElement.clientHeight;
            $("#allheight").css("height", dqheight);
        })
    </script>
</head>
<body style="padding:0px; margin:0px;">
    <div id="allheight">
   <div style="height:70%;">
       <div style="height:20%">
           这里是top的20%
       </div>
       这里是50%的内容
   </div>
    <div style="height:30%;">
        这里是底部的30%
    </div>
          </div>
</body>
</html>

就这样就行了，，帮你测试过了

香蕉猪 2015-06-01

打赏
举报

抱歉，，修改一下，，，赋值的时候不用加px


<!DOCTYPE html>
<html>
<head>
<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">


$(function() {
	//获取页面的可视区域高度和宽度
	var wHeight=document.documentElement.clientHeight;
	var footerH= $("#footer").height();
	var newH=wHeight-footerH;
	//alert(footerH.height());
	$("#top").css("height",newH);
});  
</script>
</head>

<body>
<div id="top" style="background:yellow;">123</div>
<div id="footer" style="height:300px;width:500px;background:red;"></div>

</body>
</html>

香蕉猪 2015-06-01

打赏
举报

若楼主执意手动设定，可以采用jq


<!DOCTYPE html>
<html>
<head>
<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">


$(function() {
	//获取页面的可视区域高度和宽度
	var wHeight=document.documentElement.clientHeight;
	var footerH= $("#footer").height();
	var newH=wHeight-footerH+"px";
	//alert(footerH.height());
	$("#top_float_bar").css("height",newH);
});  
</script>
</head>

<body>
<div id="top" style="background:yellow;">123</div>
<div id="footer" style="height:300px;width:500px;background:red;"></div>

</body>
</html>

代码仅供参考。

香蕉猪 2015-06-01