怎么让DIV的高度为浏览器高度

一、困惑了我很久的一个问题,本来想做一个导航,但是死活不能为浏览器高度,后来判断浏览器高度什么的,这里最重要的就是属性position:absolute

<body>
    <form id="form1" runat="server">
    <div style="height:100%;position:absolute; left:0; top:0">
         <div style="width:200px;height:100%;background-color:Red;"></div>
    </div>
    </form>
</body>

另一种方案   html的样式不能少  但是去掉form就不起作用了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试DIV高度</title>
<style type="text/css">
<!--
html,body{height:100%; margin:0px;}
#mainbody{width:100%; height:100%;background-color:#33CCCC;}
-->
</style>
</head>
<body>
<div id="mainbody">网址:<a href="http://blog.szrgb.net">http://blog.szrgb.net</a></div></body> </html>



3、加form仍会不兼容

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Qhis 2008</title>
    <style type="text/css">
    * {
    padding: 0px;
    margin: 0px;
}
html,body{
    background:#FFFFFF;
    height: 100%;
    width: 100%;
}
html{
    padding-top: 0px;
}
#E1{
    position: absolute;
    width: 100%;
    height: 57px;
    background:Red;
    z-index: 1;
    top: 0px;
}
#E2{
    position: absolute;
    width: 100%;
    height: 20px;
    background:Black;
    z-index: 1;
    top: 57px;
}
#E3{
    width: 100%;
    height:100%;
    background:Blue;
}
    </style>
</head>
<body>
    <div id="E1"></div>
    <div id="E2"></div>
    <div id="E3">sddsfsdff</div>
</body>
</html> 

4、最好使用js css各浏览器总是存在这样那样的问题

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        *{margin:0;padding:0;list-style-type:none;}
        a,img{border:0;}
        a,a:visited{color:#5e5e5e; text-decoration:none;}
        a:hover{color:#333;text-decoration:underline;}
        body{font:12px/180% Arial,Lucida,Verdana,"宋体",Helvetica,sans-serif;color:#333;background:#fff;}
   </style>
   <script type="text/javascript">
       window.onload = function () {
           /*var  map_width = document.body.clientWidth; //获取body宽度
           var  map_height = document.documentElement.clientHeight; //获取页面可见高度
           //alert(map_width);
           //alert(map_height);
           //下面两行最后的"px"必须加上,折腾了半天老是不显示添加的style,最后就是错在这了*/
           //document.getElementById("tt").style.height = map_height + "px";


           var winHeight = 0;
           if (window.innerHeight) {
               winHeight = window.innerHeight;
           }
           else if ((document.body) && (document.body.clientHeight)) {
               winHeight = document.body.clientHeight;
               //通过深入Document内部对body进行检测,获取窗口大小
               if (document.documentElement && document.documentElement.clientHeight) {
                   winHeight = document.documentElement.clientHeight;
               }
               
           }
           document.getElementById("tt").style.height = winHeight + "px";
       }
   </script>
</head>
<body style="height:100%; overflow:hidden;">
    <form id="form1" runat="server">
    <div id="tt"  style="height:100%; background-color:Red">
         <div id="top"></div>
         <div style="background-color:Gray;width:100%; height:50px;"></div>
         <div style="background-color:Fuchsia; width:100%; height:70%;"></div>
    </div>
    </form>
</body>
</html>


二、div的背景图片如何做到不变形



98.125%是 高度/宽度  计算出来的
高度是padding-bottom:  撑出来的
height:0了后  需要position:absolute布局一下  例如:
<div class="Header"><div class="Header-container">....</div></div>    .Header{position:relative;}    .Header-container{position:absolute;width:100%;height:100%;top:0;left:0;}  Header里再写一层  Header-container


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值