Home >Web Front-end >HTML Tutorial >The mobile phone is divided into two layers, how to set the height. _html/css_WEB-ITnose

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-06-24 11:43:061344browse

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:? ? ? ;}

6c04bd5ca3fcae76e30b72ad730ca86d
488a6885bf584ce482400a6e10a61400 //The upper layer accounts for 70% of the height of the entire phone
9e8cc26d18746b6ff5de8d77d81214c9 // The BAR in the upper layer is at the bottom of the upper layer, accounting for 20% of the upper layer

16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
171c8477c82d74a9b2eea84eaab93167 //Bottom layer 30% of the height of the entire phone

16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956


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>

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>

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


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>


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%
}

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn