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="width: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="width: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;
width:100%;
height:20%;
overflow:auto;
}

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

HTML:如何将网页分为上下两个部分的更多相关文章

  1. 关于网页授权的两种scope的区别说明

    关于网页授权的两种scope的区别说明 1.以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid的,并且是静默授权并自动跳转到回调页的.用户感知的就是直接进入了回 ...

  2. php函数分为哪两种?

    PHP的真正威力源自于它的函数.函数分为内置函数和自定义函数. 内置函数 所谓PHP内置函数,就是在php程序的库里面已经定义了的函数,比如echo,mysql_connect,include_onc ...

  3. 5.把报表集成到Web应用程序中-生成网页和导出两种方式

    转自:https://wenku.baidu.com/view/104156f9770bf78a65295462.html 第四部分,把报表集成到Web应用程序中 用MyEclipse新建一个Web ...

  4. scrapy爬虫提取网页链接的两种方法以及构造HtmlResponse对象的方式

    Response对象的几点说明: Response对象用来描述一个HTTP响应,Response只是一个基类,根据相应的不同有如下子类: TextResponse,HtmlResponse,XmlRe ...

  5. Struts2网页面传值两种方式

    第一种方式: /** 列表 */ public String list() throws Exception { List<Role> roleList = roleService.fin ...

  6. 基于selenium+phantomJS的动态网站全站爬取

    由于需要在公司的内网进行神经网络建模试验(https://www.cnblogs.com/NosenLiu/articles/9463886.html),为了更方便的在内网环境下快速的查阅资料,构建深 ...

  7. Python学习笔记第十五周

    目录: 一.CSS补充 1.position 2.overflow 3.hover 4.background 二.JavaScript 三.DOM 主要内容: 一.CSS补充 1.position 可 ...

  8. 慕课网6-2 作业:js实现轮播特效

    小伙伴们,掌握了JavaScript的语法.流程控制语句.内置对象以及DOM和BOM的知识,运用所学知识完成如下图所示的交互效果——轮播图.效果图如下: 具体交互效果图参考gif动态效果图,gif效果 ...

  9. SPSS把一个数据样本随机分为两部分

    SPSS把一个数据样本随机分为两部分 1.  打开SPSS数据文件. 2.  选择DATA>SELECT CASES,打开"Select Cases"对话框 3. 选择&qu ...

随机推荐

  1. Mysql的数据列类型效率

    1.    能短就不要长.(磁盘I/O少一些) 比如固定 长度的CHAR数据列,定义 CHAR(40),而不是 CHAR(255); 比如MEDIUMINT代替BIGINT,数据表就小一些, 值的处理 ...

  2. duilib教程之duilib入门简明教程1.前言

    关于duilib的介绍就不多讲了,一来不熟,二来小伙伴们想必已经对比了多个界面库,也无需赘述.下面进入正题:    不看广告看疗效! 已有众多知名公司采用duilib做为界面库,如华为网盘.PPS(P ...

  3. js遍历获取表格内数据方法

    1.一般的表格结构如下 <table> <tr> <td>id</td> <td>name</td> </tr> & ...

  4. iOS之CGAffineTransform属性详解和方法使用

    1.CGAffineTransform简介 UIView有个属性transform,是CGAffineTransform类型.可以使其在二维界面做旋转.平移.缩放单独或者组合动画! CGAffineT ...

  5. 使用R进行数据提取

    使用R进行数据提取 数据提取是数据分析日常工作中遇到最多的需求,本篇文章介绍如何通过R按特定的维度或条件对数据进行提取,完成数据提取需求. 读取并创建数据表 首先第一步是读取数据,并创建名称为loan ...

  6. java多线程编程建议

    多线程编程建议 1,将应用设计成支持多线程并发,可提高性能 2,编写多线程程序,首先保证它是正确的,其次再考虑性能 3,同步处理的开销大于非同步处理,如果可能,尽量使用非同步处理 4,避免多个共享变量 ...

  7. 基于baseline、svd和stochastic gradient descent的个性化推荐系统

    文章主要介绍的是koren 08年发的论文[1],  2.3部分内容(其余部分会陆续补充上来).koren论文中用到netflix 数据集, 过于大, 在普通的pc机上运行时间很长很长.考虑到写文章目 ...

  8. C++和C#之间的数据类型对应关系

    最近接触WINAPI比较多,一直要楂数据类型间的对应关系,所姒就转载一下~ # Windows Data Type .NET Data Type # BOOL, BOOLEAN Boolean or ...

  9. 在ALV点击Key值调用TCode,跳过初始屏幕

    在开发ALV报表时,通常业务部门会要求在ALV中点击单据号,屏幕跳转到具体业务凭证中查看业务明细,效果如下图: 点击销售销售订单号或者交货单号可传入单据号直接打开销售订单或交货单,实现方式如下: 一. ...

  10. ubuntu 安装samba共享文件夹

    安装samba sudo apt-get install samba smbclient 配置samba sudo cp /etc/samba/smb.conf /etc/samba/smb.conf ...