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

最新推荐文章于 2026-06-17 17:23:43 发布

原创最新推荐文章于 2026-06-17 17:23:43 发布 · 635 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

CSS 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用 ASP.NET 实现的网页布局案例，该案例详细展示了如何通过 HTML、CSS 和 JavaScript 来实现固定头部和底部的效果，并对中间的内容区域进行了滚动条的样式定制。

------------------------------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培训期待与您交流！------------------------------