所以我的页脚表现得很奇怪。它以前是有效的,但现在有这个奇怪的间距,当你向上滚动时,它会跟随页面并创建额外的空间。我们的想法是通过 http://css-tricks.com/snippets/css/sticky-footer/ 设置一个始终位于页面底部的粘性页脚。 . scss 的代码在这里:
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
header {
padding: 1em;
background:#EFDECD; //#5ee;
text-align: center;
}
#content {
padding: 10px;
padding-bottom: 80px; /* Height of the footer element */
}
footer {
display: block;
width:100%;
height:5em;
position:absolute;
bottom:0;
left:0;
background:#EFDECD; //#EFDECD
text-align: center;
overflow: hidden;
a{
padding: .75rem;
// position:relative;
top: 1.5em;
display: inline-block;
font-size: .72rem;
}
p{
font-size: .72rem;
}
}
video{
width: 100%;
height:auto;
}
//header{
////margin-top: 3ems;
// background-color: lightgrey;
//}
//footer{
// height: 5em;
// background-color: lightgrey;
// position: relative;
// bottom: 0px;
// width: 100%;
//
//}
.label{
margin-left: .5em;
margin-right: .5em;
}
table{
font-size: .75em;
}
.panel.callout a:not(.button):hover{
color: $anchor-font-color-hover;
}
.headtext{
display:inline-block;
// font-size:3em;
margin: 0 5em;
text-align: center;
// font-family:"Courier New";
// font-weight: bold;
// margin-left: 6em;
}
.img2{
// max-height: 20%;
max-width: 25%;
float:right;
display:inline-block;
}
.accorborder{
border: black dotted 1px;
}
h6{font-weight: bold;}
网站的实际链接位于 www.new.omegadesignla.com 所以请随时检查并从源头上进行检查。非常感谢您的宝贵时间。
最佳答案
尝试更改此代码段:
footer {
display: block;
width:100%;
height:5em;
position:absolute;
bottom:0;
left:0;
background:#EFDECD; //#EFDECD
text-align: center;
overflow: hidden;
a{
padding: .75rem;
// position:relative;
top: 1.5em;
display: inline-block;
font-size: .72rem;
}
p{
font-size: .72rem;
}
}
这个:
footer {
display: block;
width:100%;
height:5em;
position:fixed;
bottom:0;
left:0;
background:#EFDECD; //#EFDECD
text-align: center;
overflow: hidden;
a{
padding: .75rem;
// position:relative;
top: 1.5em;
display: inline-block;
font-size: .72rem;
}
p{
font-size: .72rem;
}
}
注意我只是改变了position:absolute;到位置:固定;
关于jquery - 页脚和奇怪的间距和定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28571316/