- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我的页脚设计为位于页面底部,即使其上方的 div 仅包含少量内容。它直到最近才起作用,我似乎以某种方式破坏了它。你能看看吗?
提前致谢。
CSS:
body {
margin: 0;
padding: 0;
height: 100%;
font: 100% Helvetica, sans-serif, Arial, sans-serif;
color: #000;
background-color: #FFF;
background-image: url(images/BGmain.png);
background-repeat: repeat-x;
}
/*----------
Div styles
----------*/
#container {
min-height: 100%;
position: relative;
}
.header {
padding: 0 0 230px 0;
text-align: center;
background-image: url(images/BGlogo_55top.png);
background-repeat: no-repeat;
background-position: top;
}
.column1 {
padding-bottom: 50px;
width: 960px;
margin: 0 auto;
position: relative;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
text-align: center;
}
/*----------
Other
----------*/
.plainimg {
border-style: none
}
/*----------
Text styles
----------*/
p {
font-size: 80%;
color: #333;
line-height: 150%;
text-align: left;
padding: 1px 15px 1px 15px;
}
h1 {
font-size: 100%;
color: #000;
padding: 0;
}
h2 {
font-size: 100%;
font-weight: 500;
color: #000;
padding: 0;
text-align: center;
}
/*----------
Links
----------*/
a.navlink:link, a.navlink:visited {
text-decoration: none;
display: inline-block;
color: #F1F1F1;
width: 120px;
text-align: center;
padding: 0 0 3px 0;
font-size: 80%;
}
a.navlink:hover, a.navlink:active {
text-decoration: none;
display: inline-block;
color: #FFF;
background-color: #000;
width: 120px;
text-align: centre;
padding: 0 0 3px 0;
font-size: 80%;
}
a:link, a:visited {
text-decoration: none;
color: #AEAEAE;
}
a:hover, a:active {
text-decoration: underline;
color: #999
}
div排列如下:
<div id=container>
<div class=header></div>
<div class=column1></div>
<div class=footer></div>
</div>
最佳答案
正如 Jason McCreary 所说,您需要为 html
CSS 添加高度。
使用:
html
{
height: 100%;
margin: 0;
padding: 0;
}
出于某种原因,这会在您的页面上触发一个无关的滚动条。
更新:
滚动条似乎是由 .footer h6
的溢出触发的。
添加:
bottom: 2.5ex;
和
line-height: 1;
到
footer
样式似乎清除了这一点。
但更好的方法是使用a CSS reset .
在没有重置的情况下,至少添加:
.footer h6 {
margin: 0;
padding: 0;
}
.
A CSS reset还将最大限度地减少跨平台布局的跨浏览器变化。
关于html - 粘性 CSS 页脚损坏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3127761/
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 8 年前。 Improve this qu
我目前正在尝试制作一个非常简单的应用程序,它会根据一天中的时间问候。我的代码是: open System let read() = Console.Read() let readLine() = Co
我已经运行Elasticsearch服务很长时间了,但是突然遇到了以下情况 由以下原因导致:org.elasticsearch.index.translog.TranslogCorruptedExce
我对执行以下操作的 php 重定向脚本有一个奇怪的问题: 在用户的浏览器中植入 Cookie,或者读取现有 Cookie(如果有)。 将用户重定向到另一个网址(重定向的网址是原始网址中的参数,例如 h
我正在使用 iText 7.0.0(Java 风格),似乎表格单元格 HorizontalAlignment 被忽略,因为 CENTER 和 RIGHT 都不起作用。你能重现这个吗? see th
简而言之: 我有一个可以从多个线程访问的计数器变量。尽管我已经实现了多线程读/写保护,但该变量似乎仍然以不一致的方式同时写入,导致计数器结果不正确。 深入杂草: 我使用的“for 循环”会在后台触发大
我有一个 REST 项目,在访问控制服务类中保存用户的ArrayList。一切都工作正常,直到 REST Web 服务突然抛出 java.util.NoSuchElementException。单步查
已关闭。此问题不符合Stack Overflow guidelines 。它目前不接受答案。 这个问题似乎不是关于 a specific programming problem, a software
当我刷新页面时,我无法显示 voteUp/Down,因为如果我执行 voteUp/Down(+1 或 -1) 并刷新页面,这会再次返回 voteUp/Down (0)。过去我使用 JSON,但社区推荐
我正在为离散时间 CPU 调度模拟器编写代码。它只是生成流程并相应地安排它们。我目前正在实现 FCFS 计划。我理解离散时间模拟器的本质,但我在用 C++ 实现时遇到了麻烦。 问题出现在handleN
尝试使用 yum 部署包时出现错误: 2016-07-07 14:14:31,296 - ERROR - error: rpmdb: BDB0113 Thread/process 6723/1
我有一个简单的同步队列 template class SynchronisedQueue { public: void Enqueue(const T& d
我正在使用 hadoop 0.20.append 和 hbase 0.90.0。我将少量数据上传到 Hbase,然后出于评估目的杀死了 HMaster 和 Namenode。在此之后,我向 Hbase
我使用 symfony 框架 1.4 创建了一个网站。我正在使用 sfguard 进行身份验证。 现在,这在 WAMP (windows) 上运行良好。我可以在不同的浏览器上登录多个帐户并使用该网站。
目前我已经实现了 HashMap private static Map cached = new HashMap(); 和 Item 是一个具有属性的对象 Date expireTime 和 byte
我试图将 2 个不同的 WPF 控件绑定(bind)到 ViewModel 中的同一属性,即 CheckBox.IsChecked 和 Expander.IsExpanded。我想要实现的行为是让 C
我希望这是一个简单的问题,但我没有找到答案。 我想让 build.gradle 文件通过替换某些变量来设置我的 Spring Boot 应用程序中的版本。这与广告一样有效: def tokens =
已关闭。此问题需要 debugging details 。目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and the
这个问题在这里已经有了答案: In a fragment shader, why can't I use a flat input integer to index a uniform array o
我已经下载了 OSM 世界地图。解析时出现异常: osm bound changeset (...) changeset Exception in thread "main" org.xml.sax.
我是一名优秀的程序员,十分优秀!