• 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;
    }

  • 相关阅读:
    Javabean(MAX)
    电梯时间计算
    FT232R USB UART驱动安装
    java多态
    php文件上传代码
    $_FILES ERROR
    17
    php伪静态
    我的博客开通了!
    【省选划水记】我确实是在划水。
  • 原文地址:https://www.cnblogs.com/strive-for-freedom/p/4083884.html
Copyright © 2020-2023  润新知