我在让“粘性页脚”在我的网站上工作时遇到了一些问题。如果内容小于窗口,则页脚应留在窗口底部,并且死区应以div填充。我认为CSS StickyFooter可以做到这一点,但是我无法让“pushdiv”一直将内容向下推送。如您所见,我的代码不仅仅是body-wrapper-footer。
<body>
<div id="banner-bg">
<div id="wrapper">
<div id="header-bg">
<!-- header stuff -->
</div> <!-- end header-bg -->
<div id="content-bg">
<div id="content">
<!-- content stuff -->
</div> <!-- end content -->
</div> <!-- end content-bg -->
</div> <!-- end wrapper -->
</div> <!-- end banner-bg -->
</body>
body {
color: #00FFFF;
background-image: url("Images/img.gif");
font-size: 1em;
font-weight: normal;
font-family: verdana;
text-align: center;
padding: 0;
margin: 0;
}
#banner-bg {
width: 100%;
height: 9em;
background-image: url("Images/img2.gif"); background-repeat: repeat-x;
position: absolute; top: 0;
}
#wrapper {
width: 84em;
margin-left: auto;
margin-right: auto;
}
#header-bg {
height: 16em;
background-image: url("Images/header/header-bg.png");
}
#content-bg {
background-image: url("Images/img3.png"); background-repeat: repeat-y;
}
#content {
margin-right: 2em;
margin-left: 2em;
}
我对CSS粘性页脚代码应该放在哪里感到困惑。
您的HTML有点奇怪。例如,为什么要banner-bg
包裹所有东西?
就是说,为了使用粘性页脚技术,您需要 将页脚以外的所有内容 包装到单个DIV中。因此,您的<body>
代码仅包含两个顶级DIV-
wrapper
和footer
。您当前拥有的所有内容都将放入该包装器DIV中。
请注意,如果您使用的背景图像包含透明区域,则粘性页脚可能对您不起作用,因为它依赖于wrapper
页眉覆盖的背景。
更新: 好的,这是可行的版本。“StickyFooter”样式表摘自cssstickyfooter.com,并且适用于所有现代浏览器。我对HTML进行了一些简化(不需要根据图片设置单独的背景层),但是只要您保留基本结构,就可以根据需要进行修改。另外,由于我没有您的图像,因此我添加了纯色背景色以用于说明目的,因此您需要将其删除。
<html>
<head>
<style>
* {margin: 0; padding: 0}
html, body, #wrap {height: 100%}
body > #wrap {height: auto; min-height: 100%}
#main {padding-bottom: 100px} /* must be same height as the footer */
#footer {position: relative;
margin-top: -100px; /* negative value of footer height */
height: 100px;
clear:both;
}
/* CLEAR FIX*/
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden}
.clearfix {display: inline-block}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%}
.clearfix {display: block}
/* End hide from IE-mac */
/* Do not touch styles above - see http://www.cssstickyfooter.com */
body {
background-image: url("Images/img.gif");
background: #99CCFF;
color: #FFF;
font-size: 13px;
font-weight: normal;
font-family: verdana;
text-align: center;
overflow: auto;
}
div#banner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 9em;
background: url("Images/img2.gif") repeat-x;
background: #000;
}
div#wrap {
background: #666;
width: 84em;
margin-left: auto;
margin-right: auto;
}
div#header {
height: 16em;
padding-top: 9em; /* banner height */
background: url("Images/header/header-bg.png");
background: #333;
}
div#footer {
background: #000;
width: 84em;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div id="banner">Banner</div>
<div id="wrap">
<div id="main" class="clearfix">
<div id="header">Header</div>
<div id="content">
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content
</div> <!-- end content -->
</div> <!-- end main -->
</div>
<div id="footer">
Footer
</div>
</body>
</html>
问题内容: 我正在尝试实现CSS粘贴页脚。 问题是存在内容DIV超出其容器的范围,导致滚动条不理想,并且挂在页面div上的背景图像没有扩展文档的整个高度。 这是我的HTML: 这是CSS: 问题答案: 很棒的 CSS Tricks 网站在其“ 代码段”区域中有一个“粘性页脚”的代码段 http://css-tricks.com/snippets/css/sticky-footer/ 或使用jQue
本文向大家介绍js+css实现回到顶部按钮(back to top),包括了js+css实现回到顶部按钮(back to top)的使用技巧和注意事项,需要的朋友参考一下 本文实例介绍了js+css实现回到顶部按钮的方法,分享给大家供大家参考,具体内容如下 效果 html css js 以上就是本文的全部内容,希望对大家的学习有所帮助。
本文向大家介绍Python脚本实现格式化css文件,包括了Python脚本实现格式化css文件的使用技巧和注意事项,需要的朋友参考一下 最近研究研究了css,少不了去网上分析一下别人的网页, 但很多网站的css文件都是要么写在一行,要么一个换行都没有,看起来极其痛苦,所以写一个脚本转换一下,转换为比较有可读性的格式。下面就是这个脚本: 使用方法: python cssformat.py 待转换的
问题内容: 我不确定我是否完全理解这两者之间的区别。 有人可以解释为什么我要在另一个上使用它们,以及它们之间的区别吗? 问题答案: 用于通过使用属性来调整元素。 用于测量相对于上一个元素到元素的外部距离。 此外,行为可以依赖于位置,种类而不同,或。
本文向大家介绍jQuery插件StickUp实现网页导航置顶,包括了jQuery插件StickUp实现网页导航置顶的使用技巧和注意事项,需要的朋友参考一下 实用的jQuery网页元素固定导航置顶插件StickUp,简单的jQuery插件,实现网页元素固定,如导航固定让其总是保持在视图中可见,在one-page页面中就可以看出效果,大家可以研究研究。 使用方法: 1.加载插件和jQuery 2.HT
本文向大家介绍php实现文章置顶功能的方法,包括了php实现文章置顶功能的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了php实现文章置顶功能的方法。分享给大家供大家参考,具体如下: 昨天客户让做文章置顶的功能。自己以前没做过。靠着同事的指点才做了出来。本来挺简单的事情,被自己搞了好久。自己真的缺乏对程序的理解。还是写篇博客记录一下吧。 第一步,在文章表里面建两个字段,用于做置顶功能