• HTML:如何将网页分为上下两个部分


    1.使用table:

    <table>
      <tr>
        <td height="80%"><jsp:include page="2.jsp"></td>
      </tr>
      <tr>
        <td height="20%"><jsp:include page="3.jsp"></td>
      </tr>
    </table>

    2.使用div+js:

    <html>
        <head>
    <style>body{margin:0;}</style>
    <script>
    function fixedDiv(){
        var d1 = document.getElementById("div1");
        var d2 = document.getElementById("div2");
        var h = window.document.body.clientHeight;
        d1.style.height=h*0.2;
        d2.style.height=h*0.8;
    }
    window.onload=function(){
        fixedDiv();
    }
    window.onresize=function(){
        fixedDiv();
    }
    </script>
        </head>
        <body>

    <div id="div1" style="100%;overflow-y:auto;">
          <br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1
    </div>
    <div id="div2" style="100%;overflow-y:auto;">
          <br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1
          <br>1<br>1<br>1<br>1<br>1<br>1
    </div>

        </body>
    </html>

    3.使用div+css:

    //index.html
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>split</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
    <div id="top"></div>
    <div id="bottom">

    </div>
    </body>
    </html>

    //style.css

    * {
    margin:0;
    padding:0;
    }

    #top {
    background-color:yellow;
    100%;
    height:20%;
    overflow:auto;
    }

    #bottom {
    background-color:green;
    100%;
    height:80%;
    overflow:auto;
    }

  • 相关阅读:
    Redis之数据类型大全
    基于服务的SOA架构
    mybatis_个人总结
    mybatis_开发篇
    mybatis_基础篇
    mybatis_常用标签
    mybatis_映射查询
    solr_架构案例【京东站内搜索】(附程序源代码)
    Solr_全文检索引擎系统
    zabbix监控搭建步骤
  • 原文地址:https://www.cnblogs.com/strive-for-freedom/p/4083884.html
Copyright © 2020-2023  润新知