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

  • 相关阅读:
    ZooKeeper 到底解决了什么问题?
    10个 Linux 命令,让你的操作更有效率
    你的镜像真的安全吗?
    谁动了我的主机? 之活用History命令
    Linux vs Unix
    Linux应急响应入门——入侵排查
    (一)Sharding-JDBC分库分表概述
    (三)微服务的注册中心—Eureka
    (二)springcloud功能组件
    (一)微服务基础
  • 原文地址:https://www.cnblogs.com/strive-for-freedom/p/4083884.html
Copyright © 2011-2022 走看看