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 ...
随机推荐
- 基于MFC的实时可视化项目中视图刷新消息的严谨使用
在实时可视项目中,视图的实时刷新显示对软件的体验感来说非常重要,当算法的效率达到实时,比如一秒40帧,如果实时显示帧率更不上,则体验感将大大折扣,让用户感觉你的算法并没有40帧,当然最关键的是解决显示 ...
- css正則匹配、模糊匹配
//所有class包含font-red的p标签 p[class~="font-red"] {color: red;} [abc^="def"] 选择 abc 属 ...
- java — 抽象类和接口
老生常谈的一个概念,很明确,不过我们多从几个角度来看下应该会有更好的理解,最近翻了下java8的某些新特性 关于接口的新特性让笔者受惊了,下面结合下做个总结,有更新的话直接在这里更新. 设计层面讲: ...
- 关于排序--sort()和qsort()使用
一.sort()函数的使用 使用sort()函数的时候要加上头文件#include<algorithm>和using namespace std. 这个函数接收两个或者三个参数. 第一个参 ...
- JSON对象获取指定元素以及JSON.parse() 与 JSON.stringify() 的区别
利用 JSON.parse(param) 实现 例: var param = { "name" : "张三", "text" : { &qu ...
- springmvc-环境配置-架构-配合mybatis-参数绑定
1.1. Spring入门 1.1.1. Springmvc是什么 Spring web mvc和Struts2都属于表现层的框架,它是Spring框架的一部分,我们可以从Spring的整体结构中看得 ...
- Tornado demo3 - tcpecho分析
在这个demo中,主要是使用了Tornado中异步的TCP client和server来实现一个简单的echo效果(即客户端发送的message会从server端返回到client).代码的githu ...
- 解决windows8.1的依赖
- router-link动态赋值
A:router路由配置 export default new Router({ routes: [ { path: '/home', name: 'Home', component: Home, c ...
- 廖雪峰Java11多线程编程-1线程的概念-5中断线程
1.中断线程: 如果线程需要执行一个长时间任务,就可能需要中断线程.场景:从网络上下载一个100M的文件,用户在下载过程中中断下载任务的执行. 中断线程就是其他线程给该线程发一个信号,该线程收到信号后 ...