Rumah > Artikel > hujung hadapan web > 手机分两层，如何设置高度。_html/css_WEB-ITnose
手机分两层，如何设置高度。_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 11:43:061291semak imbas
在手机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%
}
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：锤子科技的前端源码--体验静态资源优化_html/css_WEB-ITnoseArtikel seterusnya：CSS 清除浮动的几种方式_html/css_WEB-ITnose