求Js实现,该怎么写?

save 发布于 2013/11/10 12:54
阅读 529
收藏 1

现有一个网页div id=top高度是固定的100px

下方有个Div id=main 高度让他自适应浏览器高度,应该是浏览器高度减去top的高度,这个用Js该怎么写?谢谢  

加载中
0
悦澜殇
悦澜殇

用JS的话,首先要考虑的是浏览器,在不同的浏览器里面,定位也是不一样的,

我用的是jQuery,在页开头获取整个页面的长度和宽度,页面加载完成后再获取一次,这次的获取主要作用是为了页面中的内容,两次的获取方法我用的是$(window)和$(document),用两个确保长度和宽度一至,刚刚好是整个页面的长度和宽度。防止有超过页面的内容。

然后判断是什么浏览器,根据浏览器的差距再调整页面的长度和宽度。那样就不会有滚动条出来了。

最后写一个Resize 函数,窗口大小改变时,保证页面在长度和宽度

代码的话你去 plers.cn 上下载吧,看源码直接可以下载到的,我没限制。

 

0
MrZQ
MrZQ
$(function(){
    $("#main").css("height",$(document).height()-100);
});
代码仅供参考~
0
s
save

引用来自“唐阳”的答案

css足矣
请问CSS怎么写啊?
0
五杀联盟
五杀联盟
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link type="text/css"  rel="stylesheet" href="css/reset.css" />
        <style>
            body{
                overflow: hidden;
            }
            #top{
                background-color: #000000;
                height: 100px;
                width: 100%;
                position: absolute;
                top:0;
                left: 0;
            }
            #main{
                background-color: #0ff;
                height: 100%;
                margin-top: 100px;
            }
        </style>
    </head>
    <body>
        <div id="top" ></div>
        <div id="main" ></div>
    </body>
</html>
0
五杀联盟
五杀联盟
写的不好 别喷我哈
0
s
save

引用来自“唐阳”的答案

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link type="text/css"  rel="stylesheet" href="css/reset.css" />
        <style>
            body{
                overflow: hidden;
            }
            #top{
                background-color: #000000;
                height: 100px;
                width: 100%;
                position: absolute;
                top:0;
                left: 0;
            }
            #main{
                background-color: #0ff;
                height: 100%;
                margin-top: 100px;
            }
        </style>
    </head>
    <body>
        <div id="top" ></div>
        <div id="main" ></div>
    </body>
</html>
不行,我最先就是用的这种写法,main部分实际的高度是100%+top的高度,有一部分内容都跑浏览器下方去了。 不过还是非常感谢你。
五杀联盟
五杀联盟
body里面有overflow hidden,如果是做webapp的话够用了
0
mallon
mallon
position: fixed
0
Liberxue
Liberxue

引用来自“Mallon”的答案

position: fixed
用这个差不多  建议好好lz好好学学哈  css都没学踏实啊 
0
五杀联盟
五杀联盟
其实最好的方式就是响应式布局
返回顶部
顶部