`
nlx0201
  • 浏览: 28887 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
文章分类
社区版块
存档分类
最新评论

DIV高度自适应窗口

 
阅读更多

具体方法如下:

<%@ 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;
        }
    </style>
    <script type="text/javascript">
        window.onload = windowHeight; //页面载入完毕执行函数
        function windowHeight() {
            var h = document.documentElement.clientHeight; //获取当前窗口可视操作区域高度
            var bodyHeight = document.getElementById("divContent"); //寻找ID为content的对象
            bodyHeight.style.height = (h - 25) + "px"; //你想要自适应高度的对象
        }
        setInterval(windowHeight, 500)//每半秒执行一次windowHeight函数
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="divContent" style="background-color: Gray;border:1px solid blue;">Test</div>
    </form>
</body>
</html>


分享到:
评论

相关推荐

    JS实现DIV高度自适应窗口示例

    主要介绍了JS实现DIV高度自适应窗口的方法,结合完整实例形式分析了JS通过动态操作页面元素属性实现高度自适应的相关技巧,需要的朋友可以参考下

    自适度div高度

    自适度div高度,js获取元素位置和窗口高度,自动适应,也可以使用在父框是iframe,有完整的js实例

    div或img图片高度随宽度自适应的方法

    利用js来实现有一个缺点就是只能在页面刷新的时候才能调整图片的高度,不能随着浏览器的窗口大小变化来实现自适应。 二、我这次主要是用css来实现图片高度的自适应问题。 下面是所需要的代码 (这种方法是可以在图片...

    EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码

    tabs代码如下: 代码如下: &lt;div id=”tabs” class=”easyui-tabs”&gt; &lt;div title=”tabs1″&gt; tabs1 &lt;/div&gt; &lt;div title=”tabs2″&gt; tabs2 &lt;/div&gt; &lt;/div&gt; 如果id=”tabs”的div未设置宽度和高度,easyUI默认的宽度和...

    JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法

    在jQuery EasyUI中,如果直接在form...首先设置样式,使html和body高度为100%(因form和div高度设置为100%需要继承上级): &lt;style type=text/css&gt; html,body { height:100%; margin:0 auto; } &lt;/sty

    web容器如何自适应视口大小

    若想让一个块元素(如div)的高度与屏幕高度自适应,始终充满屏幕,需要从html层开始层层添加height=100%,而又因为html,body元素的width默认就是100%,因此在里面的div 设定width=100%时就能和屏幕等宽。 方法一:...

    jQuery实现布局高宽自适应的简单实例

    在页面布局(layout)时经常是上左右的框架布局并且需要宽、高度的自适应,div+css是无法实现(*hegz: div+css其实是可以实现的,利用jQuery比较容易实现浏览器的兼容性),所以需要js来辅助。 主要通过 jQuery....

    CSS特效收藏和js实例

    CSS高度自适应代码(用了都说好); JavaScript密码强度检测代码; JavaScript判断输入框中是否包含中文; JavaScript判断远程图片是否存在; Js+Css图片切换,带缩略图响应鼠标滑过; JS图片滚动代码(无缝、平滑); 纯...

    CSS特效 js实例

    CSS高度自适应代码(用了都说好); JavaScript密码强度检测代码; JavaScript判断输入框中是否包含中文; JavaScript判断远程图片是否存在; Js+Css图片切换,带缩略图响应鼠标滑过; JS图片滚动代码(无缝、平滑); 纯...

    vue终极解决多个页面Echart随页面窗口大小而改变图形大小方法

    vue终极解决多个页面Echart随页面窗口大小而改变图形大小

    VUE 单页面使用 echart 窗口变化时的用法

    在 VUE 项目中,为了使 echart 在窗口变化时能够自适应,要用到 window.resize = function(){ …….}; 但是我在项目刚开始的时间就有一个地方的高度变化使用了 window.resize ,在里面再次使用 会覆盖掉原来的,所以...

    46种常见的浏览器兼容性问题大汇总

    自适应高度 3 16. 高度不适应 3 17. IE6下图片下有空隙产生 3 18. 对齐文本与文本输入框 3 19. LI中内容超过长度后以省略号显示 3 20. 为什么web标准中IE无法设置滚动条颜色了 3 21. 为什么无法定义1px左右...

    超实用的jQuery代码段

    1.15 实现iframe高度自适应 1.16 实现左右div自适应相同高度 1.17 获取鼠标在屏幕中的坐标 1.18 获取鼠标在窗口客户区中的坐标 1.19 获取鼠标在窗口页面中的坐标 1.20 设置Flash对象的WMode窗口模式 1.21 实现类...

    CSS网站布局实录 (第二版)PDF版

    3.9 高度自适应 3.10 盒模型详解(.Box Model) 3.10.1 什么是盒模型 3.10.2 盒模型的细节 3.10.3 上下margin叠加问题 3.10.4 左右margin加倍问题 3.11 深入浮动(Float) 3.11.1 文档流(Document Flow) 3.11.2 浮动定位...

    《程序天下:JavaScript实例自学手册》光盘源码

    5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉...

    程序天下:JavaScript实例自学手册

    5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉...

Global site tag (gtag.js) - Google Analytics