>  기사  >  웹 프론트엔드  >  手机分两层,如何设置高度。_html/css_WEB-ITnose

手机分两层,如何设置高度。_html/css_WEB-ITnose

WBOY
WBOY원래의
2016-06-24 11:43:061283검색

在手机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%
}

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.