[工作问题总结]支持IE 6 7 8 9 上下固定 中间自适应

最新推荐文章于 2022-02-09 10:30:17 发布
最新推荐文章于 2022-02-09 10:30:17 发布
阅读量571 收藏
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shadow815/article/details/9098105
版权

 

------------------------------ASP.Net+Android+IO开发 .Net培训 期待与您交流！------------------------------

 

html 代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GrandsysLoginPortal.aspx.cs"
	Inherits="LoginPortal.GrandsysLoginPortal" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
	<title></title>
	<link href="resources/css/default.css" rel="stylesheet" type="text/css" />
	<script src="script/jQuery/jquery-1.7.2.min.js" type="text/javascript"></script>
</head>
<body>
	<form id="form1" runat="server">
	<div id="header">
	</div>
	<div id="content">
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
		这里显示内容...这里显示内容...<br />
	</div>
	<div id="footer">
	</div>
	</form>
</body>
</html>


css代码

html
{
	margin: 0;
	overflow: hidden;
	_padding: 151px 0px 71px 0; /*IE6下通过设置上下的填充来给上下固定部分腾出空间*/
	_border: 0;
}
body
{
	margin: 0;
	height: 100%;
	border: 0;
}
#content
{
	margin: 0; /*公共*/
	width: 100%;
	position: fixed; /*FF IE7 SF*/
	top: 151px;
	bottom: 71px;
	overflow: scroll !important;
	_position: relative; /**IE6***/
	_top: 0px;
	_overflow-y: auto;
	_overflow-x: auto;
	scrollbar-face-color: #EEEEEE; /*设置IE下滚动条颜色*/
	scrollbar-highlight-color: #ffffff;
	scrollbar-shadow-color: #919192;
	scrollbar-3dlight-color: #ffffff;
	scrollbar-arrow-color: #919192;
	scrollbar-track-color: #ffffff;
	scrollbar-darkshadow-color: #ffffff;
	_height: 100%;
}
#header
{
	position: absolute; /*公共*/
	top: 0;
	left: 0;
	width: 100%;
	height: 150px;
	overflow: auto !important; /*FF*/
	_overflow-y: auto; /*IE6*/
	_overflow-x: auto;
	background: red;
	scrollbar-face-color: #EEEEEE; /*设置IE下滚动条颜色*/
	scrollbar-highlight-color: #ffffff;
	scrollbar-shadow-color: #919192;
	scrollbar-3dlight-color: #ffffff;
	scrollbar-arrow-color: #919192;
	scrollbar-track-color: #ffffff;
	scrollbar-darkshadow-color: #ffffff;
}
#footer
{
	position: absolute; /*公共*/
	bottom: 0;
	left: 0;
	width: 100%;
	height: 70px;
	background: blue;
	overflow: auto !important; /*FF*/
	_overflow-y: auto; /*IE6*/
	_overflow-x: auto;
	scrollbar-face-color: #EEEEEE; /*设置IE下滚动条颜色*/
	scrollbar-highlight-color: #ffffff;
	scrollbar-shadow-color: #919192;
	scrollbar-3dlight-color: #ffffff;
	scrollbar-arrow-color: #919192;
	scrollbar-track-color: #ffffff;
	scrollbar-darkshadow-color: #ffffff;
}


 

 

------------------------------ASP.Net+Android+IO开发 .Net培训 期待与您交流！------------------------------

 

 

mavis
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
页面布局--上下固定中间自适应出现滚动条布局
qq_26702033的博客
03-07 7085
上下固定中间弹性滚动布局是H5页面最常见的布局方法；现在总结了3中布局方式。 1.position:fixed+overflow:scroll+js动态设置中间高度 html代码： //html结构 &lt;nav&gt;&lt;/nav&gt; &lt;div class="container" id="container"&gt; &lt;div class="inner"&am
网页上中下三分布局即上下固定中间自适应
12-13
复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ... <head> <!– 禁止浏览器从本地缓存中调阅页面。–> <...–网页不保存在缓存中，每次访问都刷新页面。...
判断支持IE页面
多一点点的专栏
10-14 510
document.location.replace('not-supported.html')
css布局--上下固定中间自适应
Calenber的博客
02-09 619
css布局--上下固定中间自适应
CSS实现上下固定中间自适应布局
syx_12的博客
08-17 212
废话不多数哦，直接上代码！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
css 两边固定中间自适应布局的实现
09-22
主要介绍了css 两边固定中间自适应布局的实现，介绍了四种常用方法以及原理：浮动、浮动内嵌 div、定位、flex。具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Button在IE6、7下的自适应宽度问题解决方法
12-13
不管哪种方式，Button的宽度在IE6、7下总是不能完美，接下来我们演示一个普通的Button，你可以用IE6或者IE7浏览器看看其显示宽度，然后对比Chrome或者IE8等浏览器，你会发现Bug的所在。 1、一个普通的Button: 可以很...
CSS min-height IE6、IE7、FF下DIV自适应高度
01-21
在DIV的CSS中加入这句：min-height:200px;height:auto; 这样在高度超过200px之后 ie6 7 ff下高度都能自适应
关于Go语言0基础小白篇最常见的面试题整理！！！.html
07-10
一个专为Go语言初学者和新手求职者准备的实用资源，它精心挑选了一系列面试中经常出现的Go语言问题，并提供了详尽的答案解析。这份资源从Go语言的基础知识出发，逐步深入到高级特性和最佳实践，旨在帮助读者快速掌握Go语言的核心概念和应用技巧。无论是对Go语言完全陌生的新手，还是有一定基础但希望巩固和提升的开发者，这份资源都是一个宝贵的学习工具。 一个专为Go语言初学者和新手求职者准备的实用资源，它精心挑选了一系列面试中经常出现的Go语言问题，并提供了详尽的答案解析。这份资源从Go语言的基础知识出发，逐步深入到高级特性和最佳实践，旨在帮助读者快速掌握Go语言的核心概念和应用技巧。无论是对Go语言完全陌生的新手，还是有一定基础但希望巩固和提升的开发者，这份资源都是一个宝贵的学习工具。 一个专为Go语言初学者和新手求职者准备的实用资源，它精心挑选了一系列面试中经常出现的Go语言问题，并提供了详尽的答案解析。这份资源从Go语言的基础知识出发，逐步深入到高级特性和最佳实践，旨在帮助读者快速掌握Go语言的核心概念和应用技巧。无论是对Go语言完全陌生的新手，还是有一定基础但希望巩固和提升的开发者，这份资源
电机学题目1.doc
最新发布
07-10
电机学题目1
碳化硅模块（SiCMOS模组）应用过程中出现的串扰问题3种有效应用对策
07-10
碳化硅模块（SiCMOS模组）应用过程中出现的串扰问题3种有效应用对策 https://pan.baidu.com/s/1N250LqWFxgk0T0yRECnJWg提取码425y 针对 SiC MOSFET 模块应用中出现的串扰问题， 本文对测量使用的差分探头进行了详细对比，由结果 可知采用高带宽和高采样率的示波器和差分探头可测 量得到准确的信号波形。同时分析了串扰问题的产生 机制，正dVds dt在反向传输电容上产生流向驱动侧的 位移电流，在栅极阻抗引起正向感应电压，叠加在栅 源极上会引起栅源极电压抬升；而负dVds dt在反向传 输电容上产生流向模块侧的位移电流，在栅极阻抗引 起负向感应电压，造成栅源极出现过大的电压负向峰 值。为解决串扰问题，本文提出了3种有效应用对策： ①减小栅极引线阻抗，从而减小阻抗上的感应压降， 抑制栅源极过压；②采用有源米勒箝位技术，泄放位 移电流，有效保护 SiC MOSFET 模块；③通过三级关 断串扰抑制技术改善栅极驱动波形，有效抑制过大的电压正向抬升和负向电压
Java宝典：数组与集合的神秘面纱-从新手到高手的进阶之路.pdf
07-10
数组与集合+程序员
2024年欧洲聚羧酸高效减水剂（大分子单体）市场主要企业市场占有率及排名.docx
07-10
2024年欧洲聚羧酸高效减水剂（大分子单体）市场主要企业市场占有率及排名.docx
oracle DBA 常用SQL语句.pdf
07-10
oracle DBA_常用SQL语句.pdf
7db8813d4a3ad47bff73e69d9c9ece6d.JPG
07-10
7db8813d4a3ad47bff73e69d9c9ece6d.JPG
Crypto_30_vHsm_Jobs.h
07-09
Crypto_30_vHsm_Jobs
CPU-Z v2.10.0中文绿色单文件
07-10
软件介绍 CPU-Z是最权威的CPU处理器检测工具。它支持的CPU种类相当全面，软件的启动速度及检测速度也很快，能够准确的检测出CPU、主板、内存、显卡、SPD等相关信息，包含制造厂及处理器名称，核心构造及封装技术，内部外部频率，最大超频速度侦测，处理器相关可以使用的指令集等。它可以看出哪家厂牌、内频、Cache等玩家常提到的数据，更包括SelfSnoop、CMOVccInstruction这些专家才看得懂的资讯与数据。
TechnicalReference-CAN-Tricore-MCAN
07-09
TechnicalReference_CAN_Tricore_MCAN
css首尾固定中间自适应
06-02
可以使用flex布局来实现CSS首尾固定中间自适应的效果。具体实现步骤如下： 1. 父元素设置display:flex;，使其成为一个flex容器。 2. 子元素设置flex-shrink: 0;，使其在父容器空间不足时不缩小。 3. 将首尾元素的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值