Home >Web Front-end >HTML Tutorial >The mobile phone is divided into two layers, how to set the height. _html/css_WEB-ITnose
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
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>
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>
<!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>
html,body{
height:100%;margin:0;
overflow:hiden;
}
#top{
height:70%
}
#top #top_float_bar{
height:20%
}
#footer{
height:30%
}