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="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:如何将网页分为上下两个部分的更多相关文章
- 关于网页授权的两种scope的区别说明
关于网页授权的两种scope的区别说明 1.以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid的,并且是静默授权并自动跳转到回调页的.用户感知的就是直接进入了回 ...
- php函数分为哪两种?
PHP的真正威力源自于它的函数.函数分为内置函数和自定义函数. 内置函数 所谓PHP内置函数,就是在php程序的库里面已经定义了的函数,比如echo,mysql_connect,include_onc ...
- 5.把报表集成到Web应用程序中-生成网页和导出两种方式
转自:https://wenku.baidu.com/view/104156f9770bf78a65295462.html 第四部分,把报表集成到Web应用程序中 用MyEclipse新建一个Web ...
- scrapy爬虫提取网页链接的两种方法以及构造HtmlResponse对象的方式
Response对象的几点说明: Response对象用来描述一个HTTP响应,Response只是一个基类,根据相应的不同有如下子类: TextResponse,HtmlResponse,XmlRe ...
- Struts2网页面传值两种方式
第一种方式: /** 列表 */ public String list() throws Exception { List<Role> roleList = roleService.fin ...
- 基于selenium+phantomJS的动态网站全站爬取
由于需要在公司的内网进行神经网络建模试验(https://www.cnblogs.com/NosenLiu/articles/9463886.html),为了更方便的在内网环境下快速的查阅资料,构建深 ...
- Python学习笔记第十五周
目录: 一.CSS补充 1.position 2.overflow 3.hover 4.background 二.JavaScript 三.DOM 主要内容: 一.CSS补充 1.position 可 ...
- 慕课网6-2 作业:js实现轮播特效
小伙伴们,掌握了JavaScript的语法.流程控制语句.内置对象以及DOM和BOM的知识,运用所学知识完成如下图所示的交互效果——轮播图.效果图如下: 具体交互效果图参考gif动态效果图,gif效果 ...
- SPSS把一个数据样本随机分为两部分
SPSS把一个数据样本随机分为两部分 1. 打开SPSS数据文件. 2. 选择DATA>SELECT CASES,打开"Select Cases"对话框 3. 选择&qu ...
随机推荐
- 图论最短路径算法——Dijkstra
说实在的,这算法很简单,很简单,很简单--因为它是贪心的,而且码量也小,常数比起SPFA也小. 主要思想 先初始化,dis[起点]=0,其它皆为无限大. 还要有一个bz数组,bz[i]表示i是否确定为 ...
- 学习笔记css3
边框 盒子圆角 border-radius:5px / 20%: border-radius:5px 4px 3px 2px; 左上,右上,右下,左下 盒子阴影 box-shadow:box-shad ...
- python相关软件安装流程图解————————pycharm安装——————pycharm-professional-2018.3.1
https://www.jetbrains.com/pycharm/download/#section=windows http://www.cnblogs.com/ceshi2016/p/91129 ...
- poj 3682 King Arthur's Birthday Celebration (期望dp)
传送门 解题思路 第一问比较简单,设$f[i]$表示扔了$i$次正面向上的硬币的期望,那么有转移方程 : $f[i]=f[i]*(1-p)+f[i-1]*p+1$,意思就是$i$次正面向上可以 ...
- 19-11-2-M
最后一个当然要模自己辣. %%%Miemengsb ZJ一下: 三道题没有一道会的,唯一的20还是T2输出$n/2$得的 咝…… T1一看,只会暴力. T2一看,像是状压,但是我是$dpsb$,于是弃 ...
- work-shineyoo:杂项1906
ylbtech-work-shineyoo:杂项1906 1.返回顶部 1. 1.1 SMS (手机的)短信服务.Short Message Service. 1.2 VOD 视频点播.Video o ...
- Appium环境安装步骤 + 代码验证环境是否成功
1.安装Microsoft .NET Framework 4.5 检测本机已安装的程序中,是否已经安装Microsoft .NET Framework 4.5及以上的版本. 如下图所示: 如果没有 ...
- <每日一题>题目10:求斐波拉契数列
def func(x): m,n = 0,1 i = 0 while i < x: yield m m,n = n,m+n i += 1 fib = [] get_func = func(100 ...
- 让html里的js脚本延迟5秒运行
setTimeout( function(){ //add your code}, 5 * 1000 );//延迟5000毫米
- 解决IDEA maven多模块打包问题
参考: https://www.jianshu.com/p/37c6688c4fcb https://blog.csdn.net/sjhuangx/article/details/71519066 h ...