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

最新推荐文章于 2023-01-02 20:20:05 发布

ZLHZHJ

最新推荐文章于 2023-01-02 20:20:05 发布

阅读量1w

点赞数 1

分类专栏： CSS 文章标签：浏览器 div server

本文链接：https://blog.csdn.net/ZLHZHJ/article/details/7602757

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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

另一种方案 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>测试ＤＩＶ高度</title>
<style type="text/css">

</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