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. LUOGU P4281 [AHOI2008]紧急集合 / 聚会 (lca)

    传送门 解题思路 可以通过手玩或打表发现,其实要选的点一定是他们三个两两配对后其中一对的$lca$上,那么就直接算出来所有的$lca$,比较大小就行了. #include<iostream> ...

  2. HNOI2018

    d1t1[HNOI/AHOI2018]寻宝游戏 感觉很神,反正我完全没想到 分开考虑每一位,对于每一位i计算一个二进制数b[i], 对于第i位,从后往前第j个数这一位是1,那么b[i]^=(1< ...

  3. iOS之CGcontext.h方法和属性简介

    /* CoreGraphics - CGContext.h Copyright (c) 2000-2012 Apple Inc. All rights reserved. */ #ifndef CGC ...

  4. vue-cli 目录结构详细讲解

    https://juejin.im/post/5c3599386fb9a049db7351a8 vue-cli 目录结构详细讲解 目录 结构预览 ├─build // 保存一些webpack的初始化配 ...

  5. 08_jQuery对象初识（四)each循环、data(非常重要)

    each: 不使用for循环答应jQuery对象,使用each: 退出整个each循环: 退出一次each循环: data:

  6. java扫描某个包下的所有java类并加载

    最近在学习java的反射和注解,实际情景中需要扫描某个包下的所有java类,然后使用类加载器加载类. 基本思路,获得程序的路径扫描src下某个包内的子包和java类,实现也比较简单. 运行环境:win ...

  7. 【牛客挑战赛31D】 雷的打字机

    题目 首先看到这个出现长度至少为\(2\)的回文子串 这就等价于不能出现两个连续且相同的字符 于是我们用概率生成函数来搞 设\(g_i\)表示\(i\)次操作后游戏没有结束的概率,\(f_{i,j}\ ...

  8. 【neo4j】neo4j Desktop1.1.9，windows 安装

    一.neo4j 介绍 Neo4j是一个高性能的,NOSQL图形数据库,它将结构化数据存储在网络上而不是表中.它是一个嵌入式的.基于磁盘的.具备完全的事务特性的Java持久化引擎,但是它将结构化数据存储 ...

  9. 【机器学习】机器学习入门01 - kNN算法

    0. 写在前面 近日加入了一个机器学习的学习小组,每周按照学习计划学习一个机器学习的小专题.笔者恰好近来计划深入学习Python,刚刚熟悉了其基本的语法知识(主要是与C系语言的差别),决定以此作为对P ...

  10. Python PIL 怎么知道写入图片格式的kb大小

    把图片数据写入一个IO,读这个IO的长度大小: #-*-coding:utf-8-*- from PIL import Image import io img = Image.open("1 ...