怎样在窗体加载的时候让一个div的高度为屏幕的高度

如题所述

<html>
    <head>
        <title>改变div高度</title>
        <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            $(function(){
                //为div设置边框
                $("#container").css("border","1px solid gray");
                //改变div的高度
                $("#container").height($(window).height());
                //改变div的宽度
                $("#container").width($(window).width());
            });
        </script>
    </head>
    <body>
       <div id="container">
       </div>
    </body>
</html>

另附Jquery获取各种屏幕的宽度和高度的示例代码:

$(document).ready(function(){
    alert($(window).height()); //浏览器当前窗口可视区域高度
    alert($(document).height()); //浏览器当前窗口文档的高度
    alert($(document.body).height());//浏览器当前窗口文档body的高度
    alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 åŒ…括border padding margin

    alert($(window).width()); //浏览器当前窗口可视区域宽度
    alert($(document).width());//浏览器当前窗口文档对象宽度
    alert($(document.body).width());//浏览器当前窗口文档body的宽度
    alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 åŒ…括border padding margin

})
温馨提示:内容为网友见解,仅供参考
第1个回答  2011-12-09
用js,动态设置div的高度为窗体的高度,例如:document.getElementById('id').style.height=window.innerHeight+'px';
你根据具体情况修改。追问

我是这样写的
window.onload = function () {
var dvheight = window.screen.availHeight;
var dvwidth = window.screen.availWidth-210;
$("#tbBody").height(dvheight);
$("#tbBody").width(dvwidth);
};
但是不管用啊

追答

你用jquery就好办了,比较简单,可以这样。
$(document).ready(function(){
$("#tbBody").height($(window).height());
$("#tbBody").width($(window).width());
});
你可以试试,有问题再问我。

追问



好像不对,要不您帮我看看。

本回答被提问者采纳
第2个回答  2011-12-09
</style> <div class=box></div> 要清楚100%的含义,这个含义是在js获取浏览器的可见部分的宽度和高度,然后赋值给DIV。
第3个回答  2011-12-09
定义高度为100%

怎么让iframe自适应高度
方法一,在每个被包含页在本身内容加载完毕之后,执行JS取得本页面的高度,然后去同步父页面的iframe高度。方法二,在主页面iframe的onload事件中执行JS,去取得被包含页的高度内容,然后去同步高度。在代码维护角度考虑,方法二是优于方法一的,因为方法一,每个被包含页都要去引入一段相同的代码来做这个...

如何设置一个写在iframe里面的div的绝对坐标位置(相对整个显示器...
div.style.cssText="position:absolute;left:0;top:0;width:500px; height:100px; z-index:1;background-color: #ffffff; layer-background-color: #ffffff;";不过我估计可能实现不了,因为你毕竟是在子页面中。不过如果你在父窗体里设置DIV,然后在IFRAME里调它,是不是更可行一些?

设置网页的时候怎么让网页一打开就呈现在屏幕的中间
1、设置网页网址的id=#,#是一个div的变量,打开网页时直接定位到id为#的div 2、也可在属性窗口中设置窗体的 StartUpPosition 为 2 3、也可右键属性 ---设置---讲分辨率调为--1280x1024

JavaScript实现窗体改变事件resize的操作
document.getElementById("div_ov_y").style.height=h-140+"px";1.第一步: 先在 data 中去 定义 一个记录宽度是属性;data: { screenWidth: document.body.clientWidth \/\/ 这里是给到了一个默认值 (这个很重要)} 2.第二步: 我们需要讲 reisze 事件在 vue mounted 的时候去挂载一...

怎么让DIV固定在页面的某个位置而不随着滚动条随意滚动?
可用的方法比较多,比较常见的是使用CSS。1、使用CSS CSS让DIV固定位置不随滚动条而滚动,fixed元素的绝对位置是相对于HTML元素来说,滚动条是body元素的。(1)我们需要做的是,让body保持其原有高度,让html只有一个窗口那么高。代码我们可以这样写:html{overflow:hidden;} body{height:100%;overflow...

easyui的datagrid怎么根据行数自适应高度?
1:比如在项目中用到了datagrid。如果界面比较简单---只有一个datagrid只需要把它的属性fit 设置为true就能实现自动适应窗体。如果在datagrid上方还有其他div的话,div 就会把datagrid挤压到窗体的下方。如果datagrid有分页控件,分页控件就看不到了。这个时候就应该用 easyui-layout来分隔窗体来使具体的内容...

怎么制作一个固定大小的html页面
1、如图,我们对div设置固定宽度和高度。2、图像预览效果如下所示。3、然后在div里面插入一张图片,如图。4、插入图片后,在预览中看到的效果,明显图片已经将父级的背景尺寸给盖住了,图片偏大了。5、然后这个时候,将图片的宽度设置为何父级一样的宽度,代码就是width:100%;这里的100%会自动跟随父...

spreadjs可以自适应屏幕么
可以的。创建SpreadJS时只需要在页面创建一个div即可,那么这个div的大小就决定了页面生成后spreadJS窗体的大小。所以只需要让SpreadJS自适应页面大小也就只需要设置这个div的样式使其适应页面大小即可。设置SpreadJS容器宽度为页面90%,高度80%。同时我们设置margin: 0 auto;是其水平居中显示。这里需要注意的...

css 中如何让div不覆盖上面的div
说明 该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。默认值:auto继承性:no版本:CSS2JavaScript 语法:object.style.zIndex="1"实例 设置图像的 z-index:img { position:absolute; left:0px; top:0px; z-index...

如何让隐藏的div以对话框方式显示
首选创建一个txt文档:把html标准的内容加进去以及追加一个div。3 要想让DIV像窗体一样编辑,首选得把它设定成为一个窗体,就相当于对div设置宽度高度以及边框布局的设定。4 另存为后缀名使html,再使用浏览器打开效果如下:5 这个时候并不能点击进行编辑,只是看着像个框而已。这个时候再对div进行追加...

相似回答