foot固定

最新推荐文章于 2024-08-30 16:48:59 发布
最新推荐文章于 2024-08-30 16:48:59 发布
阅读量673 收藏
点赞数
分类专栏： css 文章标签： html div xhtml javascript class null
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maypol/article/details/5371009
版权

<!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>
<title>Fixed header and footer for IE</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{margin:0}/* for ie mac*/
/* commented backslash hack v2 /*/
html, body{height:100%;padding:0}
* html, * html body{
    overflow:hidden;
    padding:50px 0;
    margin:-50px 0;
    padd/ing:0;
    ma/rgin:0;
}
* html #outer {
    overflow:auto;
    height:99.9%;
    voice-family: "/"}/""; voice-family:inherit;
}
* html #contain-all{
    position:absolute;
    overflow:auto;
    width:100%;
    height:100%;
    z-index:1;
}
/* end hack */
#top-bar{
    position:absolute;/* ie6 will treat this as fixed because of a bug where overflow:auto is set on a parent */
    top:0px;
    left:0px;
    height:50px;
    width:100%;
    margin:0;
    padding:0;
    z-index:999;
    overflow:hidden;
}
#topbar-inner, #footer-inner {
    height:50px;
    background:red;filter:progid:DXImageTransform.microsoft.gradient(startColorStr=darkblue,endColorStr=skyblue);
}
/* mac hide - reduce page to allow the scrollbar to remain visible /*/
* html #topbar-inner,* html #footer-inner {margin-right:17px;}
/* end hide*/
#footer{
    position:absolute;
    bottom:0;
    width:100%;
    height:50px;
    z-index:999;
}
.spacer {height:50px}/* same height as footer/header to preserve space*/
p{margin-top:0}
html>body #top-bar,html>body #footer{position:fixed}/* for moz/opera and others*/
</style>
<STYLE>
BODY {
SCROLLBAR-ARROW-COLOR: #fcfc00;
 SCROLLBAR-TRACK-COLOR: #0000d8;
 SCROLLBAR-BASE-COLOR: #00006c
}
</STYLE>
</head>
<body bgcolor="#000000" text="yellow">
<div id="outer">
  <div id="contain-all">
    <div class="spacer"></div>
    <p>
<center>
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0"
 ID=awards WIDTH=426 HEIGHT=426>
 <PARAM NAME=movie VALUE="http://images.flashkit.com/movies/3D/Pseudo/SFDd_ani-Stijn_fa-6483/SFDd_ani-Stijn_fa-6483.swf">
 <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#001199><PARAM NAME=WMODE VALUE=TRANSPARENT>
 <EMBED src="http://images.flashkit.com/movies/3D/Pseudo/SFDd_ani-Stijn_fa-6483/SFDd_ani-Stijn_fa-6483.swf" quality=high bgcolor=#001199 WIDTH=426 HEIGHT=426 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></EMBED>
</OBJECT>
</center>
<br />
    </p>
    <p>&nbsp; </p>
   
<center>
<table bgcolor="red" style="table-layout:fixed">
<tr>
<td nowrap  style="width:100px;overflow: hidden; text-overflow:ellipsis;word-break:keep-all" >
你好朋友朋友朋友我为什么不能看到效果啊
</td>
</tr>
</table></center>
<p>some text to wrap : some text to wrap : some text to cause scrolling :
      : some text to wrap : some text to wrap : some text to cause scrolling :
      : some text to wrap : some text to wrap : some text to cause scrolling :
      : some text to wrap : some text to wrap : some text to cause scrolling :
      : some text to wrap : some text to wrap : some text to cause scrolling :
      : some text to wrap : some text to wrap : </p>
   
   
<center>
<a href="#" target="_blank" id=flashit>欢迎光临e-cn-e.com</a></center>
<script language=JavaScript1.1>
<!--
if (document.all&&document.all.flashit){
var flashelement=document.all.flashit
if (flashelement.length==null)
flashelement[0]=document.all.flashit
function changecolor(which){
if (flashelement[which].style.color=='')
flashelement[which].style.color="red"
else
flashelement[which].style.color=""
}
if (flashelement.length==null)
setInterval("changecolor(0)",1000)
else
for (i=0;i<flashelement.length;i++){
var tempvariable='setInterval("changecolor('+i+')",'+'1000)'
eval(tempvariable)
}
}
-->
</script>
<p>some text to cause scrolling : </p>
    <p>some text to cause scrolling : </p>
    <p>some text to cause scrolling : </p>
    <p>some text to cause scrolling : </p>
    <p>some text to cause scrolling : </p>
    <p>some text to cause scrolling : </p>
    <p>some text to cause scrolling : </p>
    <p>some text to cause scrolling : </p>
    <p>some text to cause scrolling : </p>
    <p>some text to cause scrolling : </p>
    <p>some text to cause scrolling : </p>
    <p>some text to cause scrolling : </p>
    <p>some text to cause scrolling : </p>
    <p>some text to cause scrolling : </p>
    <p>some text to cause scrolling : </p>
    <p>some text to cause scrolling : </p>
    <p>some text to cause scrolling : </p>
    <p>some text to cause scrolling : </p>
    <p>some text to cause scrolling : </p>
    <p>some text to cause scrolling : </p>
    <p>some text to cause scrolling : </p>
    <p>some text to cause scrolling : </p>
    <p>some text to cause scrolling : </p>
    <p>some text to cause scrolling : </p>
    <p>some text to cause scrolling : </p>
    <p>some text to cause scrolling : </p>
    <p>some text to cause scrolling : </p>
    <p>some text to cause scrolling : </p>
    <p>some text to cause scrolling : </p>
    <p>some text to cause scrolling : </p>
    <p>some text to cause scrolling : </p>
    <p>some text to cause scrolling : </p>
    <p>some text to cause scrolling : </p>
    <p>some text to cause scrolling : </p>
    <p>some text to cause scrolling : </p>
    <p>some text to cause scrolling : </p>
    <p>some text to cause scrolling : </p>
    <p>some text to cause scrolling : </p>
    <p>some text to cause scrolling : </p>
    <p>some text to cause scrolling : </p>
    <p>Last bit of text</p>
    <div class="spacer"></div>
  </div>
</div>
<div id="top-bar">
  <div id="topbar-inner">&nbsp;</div>
</div>
<div id="footer">
  <div id="footer-inner">&nbsp;</div>
</div>
</body>
</html>

maypol
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
两种方式实现footer固定在页面最下方布局
人丑就要多读书的博客
10-10 8813
第一种方式设置html、body高度100%，footer相对body定位：         Document             html {             height: 100%;         }         body {             margin: 0;             padding: 0;          
将footer固定在页面底部的实现方法
weixin_34221775的博客
02-18 2066
方法一：footer高度固定+绝对定位 HTML结构： <body> <header>header</header> <main>main content</main> <footer>footer</footer> </bo...
foot 固定底部 不用绝对定位
Zoe_Wang_ing的专栏
01-05 3587
from:http://paranimage.com/css-sticky-footer/
css实现让页面的footer始终位于底部
風缘的博客
03-16 1万+
在写html页面布局的时候经常会遇到这样的情况：当页面内容较少的时候footer下面会有留白这样会很不好看，直接给footer，fixed定位的话当页面内容多的时候，footer又会盖住下面的内容。下面介绍几种方法让页面的footer始终位于底部。 方法一： <body> <div class="page"> <header> 头部 </header...
vue项目设置footer始终处于页面底部
热门推荐
hb9278的博客
07-18 2万+
利用flex布局设置footer始终处于底部 相信很多前端开发工程师会遇到这样一个问题：在我们开发也免得时候总是会把footer部分组件化，但是由于我们的开发页面内容不够，这时候我们会想到采用定位的方式，但是当我们的页面的高度超过页面的高度的时候这种定位的方式很显然是存在问题的。 就像上面这种页面高度不够footer在中间。 接下来给提供一种我自己在vue-cli脚手架搭建的项目用flex布局实...
bootstrap 固定最底部_BootstrapTable固定头和底部
weixin_30470929的博客
12-23 1079
版本选择采用的bootstrapTable样式与js的版本是1.15.4，采用比较低的版本会在有滚动条的情况下，表格不对齐需要引用的CSS与js客户名称其他名称9月09 星期一9月09 星期二9月09 星期三9月09 星期四9月09 星期五9月09 星期六9月09 星期日本周累计// data是json/data1.js引入的数据var data;function totalTextFormatt...
让web页面页脚footer固定在页面底部
feinifi的博客
01-08 6009
有时候，我们发现很多页面内容不多的时候，页面底部内容飘到了中间： 这个页面底部没有固定，结果...，一个前端工程师是无法接受这样的结果的。 这里介绍一种通用的解决办法，让页面底部固定。 思路： 首先需要一个容器包裹所有的页面元素，这里使用&lt;div id="container"&gt;&lt;/div&gt;来做。id为container的容器需要设置高度100%,否则，当内容较少的...
footer 跟随+固定底部
liuscsdn的技术学习
04-17 1140
footer 固定底部：内容过多超出当前可视窗口的一屏大，footer 跟随在内容尾部；若内容较少或不足当前可视窗口一屏大，则固定在页面底部 有三种方式，前两种是css方式，第三种是js方式 其实三种方法的本质都是给section中间模块一个 min-height 1. 第一种方法 <!DOCTYPE html> <html lang="en"> <head> ...
js 固定悬浮效果实现思路代码
10-27
`var fix_foot_pos = parseInt(ele_fix.height()) + parseInt(scro_top) - 10;`计算悬浮元素的底部相对于文档顶部的距离。 5. **设置元素定位**： 根据滚动位置和参考元素的位置，使用`ele_fix.css()`动态改变元素...
POLAR S1 FOOT POD用户使用说明书.pdf
02-13
Polar S1 Foot Pod是一款专为跑步者设计的设备，用于精确测量速度、配速和距离。这款设备与你的腕表配对，提供准确且反应灵敏的数据，帮助你在运动时实时了解自己的表现。 在开始使用Polar S1 Foot Pod之前，必须...
css实现背景渐变与底部固定的蓝天白云示例
09-25
3. **底部固定元素**：要创建一个固定在底部的蓝天白云效果，我们可以创建一个ID为`body_foot`的`div`元素。通过设置`position: absolute;`，`bottom: 0px;`和`right: 0px;`，使这个元素始终贴合在页面底部右侧。...
Android实现头尾部固定,Android RecyclerView添加头部和底部的方法
weixin_31966615的博客
05-26 908
如果只是想添加头部，可是使用GitHub里面这个项目，它可以为LinearLayoutManager，GridLayoutManager ，StaggeredGridLayoutManager布局的RecyclerView添加header。使用起来也十分简单；只需将RecyclerViewHeader布局放在RecyclerView的上层。android:layout_width="match_p...
HTML ＜template＞ 标签的基本技巧
ufrontend的博客
08-30 401
HTML中的标记是 Web 开发中一个功能强大但经常未得到充分利用的元素。它允许你定义可重复使用的内容，这些内容可以克隆并插入 DOM 中而无需最初渲染。此功能对于创建动态、交互式 Web 应用程序特别有用。在本文中，我们将探讨有效使用 标记的 10 个基本技巧，帮助你在项目中充分发挥其潜力。1. 了解 标记的基础知识 标记是一个 HTML 元素，它包含页面加载时不会渲染的客户端内容。
30分钟从零开始入门拿下 HTML
Y_1215的博客
08-27 1053
HTML(HyperTextMarkupLanguage),超⽂本标记语⾔.超⽂本:⽐⽂本要强⼤.通过链接和交互式⽅式来组织和呈现信息的⽂本形式.不仅仅有⽂本,还可能包 含图⽚,⾳频,或者⾃已经审阅过它的学者所加的评注、补充或脚注等等.标记语⾔:由标签构成的语⾔ HTML的标签都是提前定义好的,使⽤不同的标签,表⽰不同的内容.类似⻜书⽂档,Word⽂档如果选中⽂本,点击标题1,就会使⽤标题1的样式来显⽰⽂本,上述标题1就是⼀个"标签"我是⼀级标题我是⼆级标题
网页html版——在线查字典的一个web服务器
l22221的博客
08-27 1041
HTML是一种用于创建网页的标准标记语言。可以用dreamwave这个工具来写使用文本编辑器（如Notepad++、Sublime Text、Visual Studio Code等）创建一个新的文件，并将其保存为 .html 文件。
html快速入门
m0_52049533的博客
08-22 814
/
前端篇-html
qq_60203955的博客
08-30 88
前端学习
HTML 中 a 超链接标签全解析：属性、锚点与伪类
最新发布
前端基地
08-30 815
本文深入阐释 HTML 中的 a超链接标签、锚点及伪类。丰富的讲解与实际案例紧密结合，助力读者快速熟悉这些常用标签。无论你是网页设计新手，还是经验丰富的开发者，都能在此收获实用知识与技巧，为你的网页创作之路增添新的活力。
<div class="foot"> <h2>传统手工艺@剪纸</h2> <div > <a href="#">网站地图</a> <a href="#" style="margin-top:30px;">隐私政策</a> <a href="#" style="margin-top:60px;">简体中文 / English </a> </div> <div > <a href="#">联系我们</a> <a href="#" style="margin-top:30px;">常见问题与回复</a> </div> <div ><a href="#">版权所有：</a></div> <div ><a href="#">所在地址：</a></div> </div> </div> </div>怎么把这个放在页面最底部
05-30
.foot { position: fixed; bottom: 0; left: 0; right: 0; height: 200px; /* 根据实际情况设置高度 */ } ``` 2. 在HTML文件中将这个div放在标签内的最后。 这样就可以将这个div固定在页面底部了。需要注意的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值