怎么让div高度随显示器的高度而改变
日期：2014-05-17 浏览次数：20686 次
如何让div高度随显示器的高度而改变
如何让div高度随显示器的高度而改变 请高手指点指点
------解决方案--------------------
显示器？你指的是浏览器窗口高度吗？
（如果是适应显示器的高度没有什么意义，因为浏览器大小是可变的）
我觉得最关键的是要设置html和body元素的css height为100%吧
然后把div的height设为一个百分比的值就可以了
我自己写了个页面，这个页面中div会自动占据页面的60%空间并居中：
（doctype是strict，用transitional可能会有问题，没有试过）
如何让div高度随显示器的高度而改变 请高手指点指点
------解决方案--------------------
显示器？你指的是浏览器窗口高度吗？
（如果是适应显示器的高度没有什么意义，因为浏览器大小是可变的）
我觉得最关键的是要设置html和body元素的css height为100%吧
然后把div的height设为一个百分比的值就可以了
我自己写了个页面，这个页面中div会自动占据页面的60%空间并居中：
（doctype是strict，用transitional可能会有问题，没有试过）
- HTML code
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title><!-- Insert your title here --></title>
<style type="text/css">
html, body { height: 100%; margin: 0px; padding: 0px; }
</style>
</head>
<body>
<div style="position: fixed; left: 20%; top: 20%; width: 60%; height: 60%; background: #FFEEEE;">abcdef</div>
<!-- Insert your content here -->
</body>
</html>
------解决方案--------------------
- HTML code
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> </head> <body> <div id="div1" style="height: 100%;background-color: #FFCC66">11</div> </body> </html>
------解决方案--------------------
我试了下３楼的代码，如果网页顶上加一行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
就不行了，似乎是个兼容性问题？
------解决方案--------------------
jquery 写的！
- JScript code
$(document).ready(function(){
var height = document.documentElement.clientHeight ;
$("#main_data").height(height) ;
});
------解决方案--------------------
。。。。解释为了解决你这个问题才不加DOCTYPE的。你有特殊要求一定要加？
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
