zoukankan      html  css  js  c++  java
  • js设置height随窗口大小改变

    1. js 写function,设置div=primary部分的最大和最小高度

    (ps,css中使用max-height, min-height,js中使用minHeight, maxHeight)

    <head>

    <script type="text/javascript">

         function setHeight()

                {

                     var max_height = document.documentElement.clientHeight-105;

                     var primary = document.getElementByIdx_x('primary');

                     primary.style.minHeight = max_height+"px";

                     primary.style.maxHeight = max_height+"px";                                      

               }

     </script>

    </head>

    2. 页面载入时,执行function,设置最大最小高度。onresize,当窗口大小改变时,相应的改变高度。

    (ps:css文件中加入滚动条的设置, ex. #primary{ overflow-y:auto; 超出最大高度时,滚动条出现;最小高度,可保证页面的foot部分始终在最下方)

    <body onload="setHeight();" onresize=" setHeight()">

    3. 为了使第一部分中js的设置函数生效,div中应该添加style=""

    <div id=" primary" class="area" style="">

    ================================

    另一种手动设置不同的分辨率指向不同的页面(笨方法)

    把它做成3中不同分辨率的JS然后用
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
    <!-- saved from url=(0011)about:blank --> 
    <HTML> 
    <script LANGUAGE="JavaScript"> 
    <!-- Begin 
    function redirectPage() { 
    var url1280x1024 = "页面一"; 
    var url800x600 = "页面二"; 
    var url1024x768 = "页面三"; 
    if ((screen.width == 1280) && (screen.height == 1024)) 
    window.location.href= url640x480; 
    else if ((screen.width == 800) && (screen.height == 600)) 
    window.location.href= url800x600; 
    else if ((screen.width == 1024) && (screen.height == 768)) 
    window.location.href= url1024x768; 
    else window.location.href= url640x480; 
    } 
    // End --> 
    </script> 
    
    <HEAD> 
    <META http-equiv=Content-Type content="text/html; charset=unicode"> 
    <META content="MSHTML 6.00.2900.2722" name=GENERATOR></HEAD> 
    <body onload="redirectPage()"></body></HTML>
  • 相关阅读:
    复制excel表中的数据
    微信H5页面分享获取JS-SDK
    JS中let、var、const的区别
    JS-对象常用方法整理
    JS-数组常用方法整理
    掌握一门新技术/语言需要哪些步骤?
    浅谈JavaScript中的内存管理
    js对象模型2
    ts中的装饰器
    ts中的泛型
  • 原文地址:https://www.cnblogs.com/chickenbeer/p/4757735.html
Copyright © 2011-2022 走看看