Heim >Web-Frontend >HTML-Tutorial >手机分两层，如何设置高度。_html/css_WEB-ITnose
手机分两层，如何设置高度。_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:43:061310Durchsuche
在手机UI里，想布局三个DIV，TOP为上部，FOOTER为下部，op_float_bar在TOP里面的底部，请问这个DIV的高度如何设置？
#top { width:100%; height:？？？;}
//上层占整个手机的70%高度
//上层里的BAR，在上层的底部，占上层的20%
//底层占整个手机的30%高度
回复讨论(解决方案)
楼主不妨学习学习jquery-mobile???
若楼主执意手动设定，可以采用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> 代码仅供参考。
抱歉，，修改一下，，，赋值的时候不用加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>
<!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> 就这样就行了，，帮你测试过了
其它上下两个可以，但20%的底部要跟70%的上部的底部对齐，还不行，现20%是在70%的上面的。
html,body{
height:100%;margin:0;
overflow:hiden;
}
#top{
height:70%
}
#top #top_float_bar{
height:20%
}
#footer{
height:30%
}
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：锤子科技的前端源码--体验静态资源优化_html/css_WEB-ITnoseNächster Artikel：CSS 清除浮动的几种方式_html/css_WEB-ITnose