www.ypnh.net > Div怎么用js实现高度百分比

Div怎么用js实现高度百分比

jquery的行么$(".div_class").height();//获取目标div高度$(".div_class").height($(".body").height()-100);//将目标div高度设为body高度减100,此处可做任意运算

javascript screen对象获取屏幕宽高如alert(screen.height)<br>availHeight 属性 -- 窗口可以使用的屏幕高度,单位像素<br>availWidth 属性 -- 窗口可以使用的屏幕宽度,单位像素<br>colorDepth 属性 -- 用户浏览器表示的颜色位数,通常为32位(每像素的位数)<br>pixelDepth 属性 -- 用户浏览器表示的颜色位数,通常为32位(每像素的位数)(IE不支持)<br>height 属性 -- 屏幕的高度,单位像素<br>width 属性 -- 屏幕的宽度,单位像素<br><br>div设置定位,宽度高度设为屏幕一般半即可,至于居中的话可以绝对定位

可以啊,先把html和body的高度设置成100%就可以了

来讨论一下吧据我个人所知,最稳定也是最常用的方法仍然是js实现,尽管很多年前就有对于高度单纯通过css控制的方法.你要说为了自适应不同分辨率,一般来讲设置宽度的情况更多.加上目前主流浏览器都具备的缩放功能,弹性布局字体大小控制应该会相对的比以前减少.高度问题,只要有足够的内容,高度设置从来不是问题,大多数情况下也不需要去设置高度.相对的,在内容不足或者设计需求等情况,必须去设置高度,统一高度的时候,解决方案除了js完美点,兼容,近年的纯css解决我个人没去了解,你可以查阅一些文档,包括淘宝ued团队的博客(多年前有相关的设置方法)以上为我个人观点

我用js实现的,css貌似实现不了吧,反正我没思路<!DOCTYPE html><html lang="en"><head> <title>div_height_equal_width</title> <style type="text/css"> #div1{ width:50%; background-color:lavender; margin:0 auto; } </style> <script type=

原理:先给父级<div>设置宽度(像素) 然后再子<div>里,设置百分比,如图示.代码原件:<div style="width:80px;height:50px; border:#FF0000 3px solid"> <div style="width:20%;height:50%; border:#CC33FF 3px solid"></div> </div> 复制到<body></body>之间使用即可.

一个登陆界面的文档结构大致如下:其中login_header和login_footer无文字内容,只有一个背景颜色,颜色区别于login_content,login_content是登录界面的主模块,用户填用户名和密码.现在为了保证不同屏幕下显示效果相同,div的高度使用百分比设置.body和login_wrapper的高度为100%,以保证本页面充满浏览器并且不会翻页.同时设置login_header和login_footer的高度为20%,content为60%.但是如此设置,浏览器只能显示content的内容,header和footer高度均为0px.无法达到本来的初衷.很奇怪,不知应该如何解决上述的问题.

js里面提供了很多的方法,可以计算DIV的高度,以及也可以给DIV直接复制. 如下是代码的实现: <body> <div style="width:100px; height:100px; background:#ccc;" id="div"></div></body><script> var oDiv = document.getElementById('div'); alert(oDiv.offsetHeight); //这个就是获取DIV的高度 oDiv.style.height = oDiv.offsetHeight + 100 + 'px'; //这个就是直接给DIV的高度赋值.</script>

首先你得有个高宽比(比例),根据这个比,用js计算就是了.function resizeHeight(id,size){var ele = document.getElementById(id);var width = ele.offsetWidth;ele.style.height = size*width+"px";}说明:id是div的id(String),size是高宽比(Number).调用:resizeHeight("youId",0.5);window.onresize = resizeHeight("youId",0.5);

来讨论一下吧据我个人所知,最稳定也是最常用的方法仍然是JS实现,尽管很多年前就有对于高度单纯通过CSS控制的方法.你要说为了自适应不同分辨率,一般来讲设置宽度的情况更多.加上目前主流浏览器都具备的缩放功能,弹性布局字体大小控制应该会相对的比以前减少.高度问题,只要有足够的内容,高度设置从来不是问题,大多数情况下也不需要去设置高度.相对的,在内容不足或者设计需求等情况,必须去设置高度,统一高度的时候,解决方案除了JS完美点,兼容,近年的纯CSS解决我个人没去了解,你可以查阅一些文档,包括淘宝UED团队的博客(多年前有相关的设置方法)以上为我个人观点

网站地图

All rights reserved Powered by www.ypnh.net

copyright ©right 2010-2021。
www.ypnh.net内容来自网络,如有侵犯请联系客服。zhit325@qq.com