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. 关于join的一些补充

    1, 为什么join是string的method而不是list的method http://effbot.org/pyfaq/why-is-join-a-string-method-instead-o ...

  2. 今天介绍一个渐变的方法,在shell里面自动生成注释简介

    在编辑sh脚本时,我经常在shell中写一些注释.今天我介绍一种渐变方法,它可以在每次vim shell脚本时自动在shell中生成注释和其他信息. 让我们共享一个shell脚本模板文件,将其复制到用 ...

  3. python 排序算法总结及实例详解

    python 排序算法总结及实例详解 这篇文章主要介绍了python排序算法总结及实例详解的相关资料,需要的朋友可以参考下 总结了一下常见集中排序的算法 排序算法总结及实例详解"> 归 ...

  4. Spring MVC(十二)--使用ModelView实现重定向

    上一篇总结了使用返回字符串的方式实现重定向以及重定向过程中传递字符串参数和pojo参数的过程,本篇总结另一种重定向的实现方式--返回ModelAndView 这次的场景是这样的:在页面输入一些信息添加 ...

  5. 关于大数据平台ETL可行性方案

    今年做过两个公司需求都遇到了实时流入hive的需求,storm入hive有几种可行性方案. 1.storm直接写入hive,storm下面有个stormhive的工具包,可以进行数据写入hive.但是 ...

  6. 如何做系列(3)-Java数据类型和MySql数据类型对照表

    类型名称 显示长度 数据库类型 JAVA类型 JDBC类型索引(int) 描述             VARCHAR L+N VARCHAR java.lang.String 12   CHAR N ...

  7. API 练习 第一篇

    练习API   CreateSemaphoreCreateEvent ReleaseSemapWaitForSingleObject  CloseHandleInitializeCriticalSec ...

  8. Quick BI 的模型设计与生成SQL原理剖析

    一.摘要 随着物联网的告诉发展,数据量呈现井喷式的增长,如何来分析和使用这些数据,使数据产生商业价值,已经变得越来越重要.值得高兴的是,当前越来越多的人已经意识到了用数据分析决定商业策略的重要性,也都 ...

  9. HZOI20190818模拟25题解

    题面:https://www.cnblogs.com/Juve/articles/11372379.html A:字符串 其实是CATALAN数水题... 和网格一毛一样:https://www.cn ...

  10. Django项目:CRM(客户关系管理系统)--79--69PerfectCRM实现CRM业务流程(bpm)学生讲师分页

    # student_views.py # ————————60PerfectCRM实现CRM学生上课记录———————— from django.shortcuts import render #页面 ...