• 实现三行布局页面自适应不同分辨率下的屏幕高度


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    <META http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
    *
    { margin:0; padding:0; }
    #pageHead
    { background-color:#CC00FF; height:100px; }
    #pageBody
    { background-color:#9966CC; }
    #pageFoot
    { background-color:#996666; height:50px; }
    </style>
    </HEAD>
    <BODY style='overflow:hidden;' onload='get_height();'>
    <div id='pageHead'>Head</div>
    <div id='pageBody' style='overflow:auto;'>Body<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
    <div id='pageFoot'>Foot</div>
    <script>
    function get_height(){
    var page_height = document.body.clientHeight;
    var head_height = document.getElementByIdx_x('pageHead').clientHeight;
    var foot_height = document.getElementByIdx_x('pageFoot').clientHeight;
    document.getElementByIdx_x(
    'pageBody').style.height = page_height - head_height - foot_height;
    }
    window.onresize
    = get_height;
    </script>
    </BODY>
    </HTML>
  • 相关阅读:
    Discuz 网站移至 Ubuntu 14.04.4 LTS VPS 配置
    ubuntu的一些常用命令,测试版本:Ubuntu 12.04.5 LTS
    文本的水平对齐方式,带来的一系列问题
    庆祝我的Blog开张了,今天起和大家一起见证一款原生的富文本编辑组件FoxJsonRichView的诞生过程。
    竖直导航(一)
    测试
    第七次作业
    第六次作业
    第四次作业
    第五次作业
  • 原文地址:https://www.cnblogs.com/xiongbaobao/p/2393448.html
Copyright © 2020-2023  润新知