zoukankan      html  css  js  c++  java
  • 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;
    }

  • 相关阅读:
    坑爹的A标签 href
    JS 遍历 json key ,获取设置可变的key
    js to json字符串
    js eval深入
    Js 省市联动
    JS with用法
    JS
    js 内置对象常用方法
    django-pure-pagination 分页插件
    OpenStack 网络服务 Neutron 私有网络构建(十九)
  • 原文地址:https://www.cnblogs.com/strive-for-freedom/p/4083884.html
Copyright © 2011-2022 走看看