The mobile phone is divided into two layers, how to set the height. _html/css

The mobile phone is divided into two layers, how to set the height. _html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:43:06

Original

1291 people have browsed it

In the mobile UI, I want to layout three DIVs. TOP is the upper part, FOOTER is the lower part, and op_float_bar is at the bottom inside TOP. How to set the height of this DIV?
#top { width:100%; height:? ? ? ;}

//The upper layer accounts for 70% of the height of the entire phone

// The BAR in the upper layer is at the bottom of the upper layer, accounting for 20% of the upper layer

Reply to discussion (solution)

You may wish to learn jquery-mobile???

If you insist on setting it manually, you can use 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>

Copy after login

The code is for reference only.

Sorry, please modify it,, you don’t need to add px when assigning value

<!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>

Copy after login

<!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>

Copy after login

That’s it, I’ve tested it for you

<!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>

Copy after login

That’s it, I’ve tested it for you

The other two are fine, but 20% The bottom should be aligned with the bottom of the upper part of 70%, but it still doesn't work. Now 20% is on top of 70%.

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