`
huanyq2008
  • 浏览: 166484 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

页面头部和底部固定

CSSJavaScriptHTMLXHTML 
阅读更多

说明：设置body的padding属性padding-top:16px;padding-bottom:16px，使页面上下留有16px的空白。然后设置#header和#footer的绝对位置和高度。设置#content的overflow:auto。试着改变这几个参数，一用就明白

 

 

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title></title>
<meta name="generator" content="editplus">
<meta name="author" content="ariex">
<meta name="keywords" content="">
<meta name="description" content="">
<style type="text/css">
body{margin:0px;padding:0px;overflow:hidden;padding-top:16px;padding-bottom:16px;}
div{margin:0px;padding:0px;}
#header{background-color:#D3D3D3;color:white;position:absolute;top:0px;left:0px;height:16px;width:100%;}
#content{background-color:#EFF7FF;width:100%;height:100%;overflow:auto}
#footer{background-color:#FFDD99;color:white;width:100%;height:16px;position:absolute;bottom:0px;left:0px;}
</style>
<script language="javascript">
</script>
</head>
<body>
<div id="header">header</div>
<div id="content">
<script language="javascript">
for(i=0;i<1000;i++){
document.write(i+"<br />");
}
</script>
</div>
<div id="footer">footer</div>
</body>
</html>

 

========================================================================

 2010-1-15

动态修改头部和底部的属性

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">  
<html> 
<head>
<title>页面全屏布局</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
body{margin:0px;padding:0px;overflow:hidden;padding-top:16px;padding-bottom:16px;}
div{margin:0px;padding:0px;}
#header{background-color:#D3D3D3;color:white;position:absolute;top:0px;left:0px;height:16px;width:100%;}
#content{background-color:#EFF7FF;width:100%;height:100%;overflow:auto}
#footer{background-color:#FFDD99;color:white;width:100%;height:16px;position:absolute;bottom:0px;left:0px;}
</style>
<script type="text/javascript">
var bodyObj;
var headerObj;
var contentObj;
var footerObj;
function init(){
var innerStr = "";
for(i=0;i<100;i++){
	innerStr = innerStr + i+"<br />";
}
bodyObj = document.body;
headerObj = document.getElementById("header");
contentObj = document.getElementById("content");
footerObj = document.getElementById("footer");
contentObj.innerHTML = innerStr;
}
function changeHeader(){
	bodyObj.style.paddingTop = "80px";
	headerObj.style.height = 80+"px";
}
function resetHeader(){
	bodyObj.style.paddingTop = "16px";
	headerObj.style.height = 16+"px";
}
function changeFooter(){
	bodyObj.style.paddingBottom = "100px";
	footerObj.style.height = 100+"px";
}
function resetFooter(){
	bodyObj.style.paddingBottom = "16px";
	footerObj.style.height = 16+"px";
}
</script>
</head>
<body onload="init()">
<div id="header">
<span style="float:right;">
	<button onclick="changeHeader()">改变头部</button>
	<button onclick="resetHeader()">重置头部</button>
	<button onclick="changeFooter()">改变底部</button>
	<button onclick="resetFooter()">重置底部</button>
</span>
header
</div>
<div id="content"></div>
<div id="footer">footer</div>
</body>
</html>

 

 CSS Top and Bottom Frames Layout.html

符合W3C的商中下布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="overflow:hidden;_overflow:hidden;" xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Top and Bottom Frames Layout</title>
<style type="text/css">

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; 
max-height: 100%; 
}

#framecontentTop, #framecontentBottom{
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 130px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}

#framecontentBottom{
top: auto;
bottom: 0; 
height: 110px; /*Height of bottom frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}

#maincontent{
position: fixed; 
top: 130px; /*Set top value to HeightOfTopFrameDiv*/
left: 0;
right: 0;
bottom: 110px; /*Set bottom value to HeightOfBottomFrameDiv*/
overflow: auto; 
background: #fff;
}

.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
padding: 130px 0 110px 0; /*Set value to (HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv 0)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%; 
width: 100%; 
}

</style>

<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>

</head>

<body>

<div id="framecontentTop">
<div class="innertube">

<h1>CSS Top and Bottom Frames Layout</h1>
<h3>Sample text here</h3>

</div>
</div>

<div id="framecontentBottom">
<div class="innertube">

<h3>Sample text here</h3>

</div>
</div>


<div id="maincontent">
<div class="innertube">

<h1>Dynamic Drive CSS Library</h1>
<p><script type="text/javascript">filltext(255)</script></p>
<p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></p>

</div>
</div>


</body>
</html>

 

分享到：
| IE7远程客户端本地预览图片的解决办法（兼 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    固定页面头部和底部中间滚动

    html页面头部，底部固定，中间内容超过1屏时，页面自动显示滚动条

    html解决苹果手机头部底部固定

    html页面头部和底部解决苹果手机无法固定。

    html+css实现的一个静态网站，有五个页面，每个页面嵌入了两个固定的子页面即头部导航栏和底部标语.zip

    基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 ...

    导航菜单固定头部跟随屏幕滚动jQuery插件posfixed

    jQuery-Posfixed 能够让网页的导航或表头等固定在顶部或底部，让用户更方便的操作或查看信息，淘宝网、易迅网等电子商务网站常常用到这种效果。除了导航和表头，也可以固定 其他内容，比如广告、返回顶部等等，同时 ...

    div footer标签css实现位于页面底部固定

    那么如何将Web页面的“footer”部分永远固定在页面的底部呢？先来看下下面的代码吧 这是第一种方案，后面还有几种 HTML代码 复制代码代码如下: ”container”&gt; ”header”&gt;这是头部&lt;/div&gt; ”page&gt; ”left”&gt;left ...

    vue router 通过路由来实现切换头部标题功能

    在做单页面应用程序时，一般页面布局头尾两块都是固定在布局页面，中间为是路由入口。这篇文章主要介绍了vue-router 通过路由来实现切换头部标题 ,需要的朋友可以参考下

    微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)

    主要介绍了微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

    冠格企业建站系统 1.4.0(信息港简约版).rar

    基于Ajax框架时间的页面排序技术，拖动鼠标让您方便调整页面栏目顺序，您还可以修改每个页面的模板，定义页面的Seo等，而且能让您页面采用不同的页面头部和底部模板，轻松实现页面多样化。 3、图片和资源文件管理...

    冠格企业建站系统 1.4.0(沙滩鞋业现代版).rar

    基于Ajax框架时间的页面排序技术，拖动鼠标让您方便调整页面栏目顺序，您还可以修改每个页面的模板，定义页面的Seo等，而且能让您页面采用不同的页面头部和底部模板，轻松实现页面多样化。 3、图片和资源文件管理...

    div+css有实例,易学易懂

    8.6.1 IE6.0 中固定宽度和高度的容器和内容 8.6.2 FIREFOX2.0 中的容器与内容 8.6.3 可能出现的问题和解决方法 8.7 使用:after 伪类解决浮动的问题 8.7.1 IE6.0 中的浮动元素和容器 8.7.2 FIREFOX2.0 中的浮动元素和...

    冠格建站系统(电子之发展科技) V1.40.rar

    基于Ajax框架时间的页面排序技术，拖动鼠标让您方便调整页面栏目顺序，您还可以修改每个页面的模板，定义页面的Seo等，而且能让您页面采用不同的页面头部和底部模板，轻松实现页面多样化。 3、图片和资源文件管理 ...

    冠格建站系统(服装鞋帽之时尚潮流) V1.40.rar

    基于Ajax框架时间的页面排序技术，拖动鼠标让您方便调整页面栏目顺序，您还可以修改每个页面的模板，定义页面的Seo等，而且能让您页面采用不同的页面头部和底部模板，轻松实现页面多样化。 3、图片和资源文件管理 ...

    冠格建站系统(电子之蓝色极致) V1.40.rar

    基于Ajax框架时间的页面排序技术，拖动鼠标让您方便调整页面栏目顺序，您还可以修改每个页面的模板，定义页面的Seo等，而且能让您页面采用不同的页面头部和底部模板，轻松实现页面多样化。 3、图片和资源文件管理 ...

    Nuxt默认模板、默认布局和自定义错误页面的实现

    通常用于一些有固定格式的网站 比如一些网站的头部和底部都是一样的 此时即可使用默认模板 默认模板 在项目的根目录下创建一个名为app.html的文件 Nuxt即可自动将其识别为默认模板： 用法和字符串拼接有点类似 可...

    flex布局实现上下固定中间滑动的布局方式

    固定头部和尾部，中间部分可滑动，使用flex布局 1.设置html，body高度为100% 2.设置最外层div的布局方式为弹性布局display:flex; 3.设置最外层div的主轴方向为flex-direction: column;主轴为垂直方向，起点在上沿 ...

    多梦主题 v4.0

    导航条设置：可以设置导航条是否固定，还是随页面文档流滚动，可以设置是白色底还是黑色底，是固定在顶部还是固定在底部等。评论框设置：设置评论框基本配色方案，以及一些描述文字。侧边栏设置：在这里可以设置首页...

    Html5移动端适配IphoneX等机型的方法

    h5做成的移动端页面，常见布局为头部+躯干+底部三栏模式，头部和顶部都是固定定位，躯干可里的内容可以滚动，暂定的布局如下： &lt;header&gt;&lt;/header&gt; &lt;main&gt;&lt;/main&gt; &lt;footer&gt;&lt;/footer&gt; 但如果没采用IphoneX机型...

    使用常见的sticky footer布局方式

    我们常见的网站页面都会把一个页面分为：头部区、内容区、页脚区,当头部区和内容区内容较少时,页脚区能固定在网页底部,而不是随着文档流排布。当页面内容较多时，页脚能随着文档内容自动撑开,显示在页面的最底部。这...

Magicbox
Global site tag (gtag.js) - Google Analytics