Question

所以我的页脚表现得非常奇怪。它之前有用，但现在有这种奇怪的间距，当你向上滚动它跟随页面并创建额外的空间。我们的想法是通过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 所以请随时查看并从源头检查。非常感谢你的时间。

Answer 1

尝试更改此代码段：

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;
    }
}

注意我刚改变了位置：绝对;定位：固定;

Answer 2

在右键单击并检查元素后，您是否添加了任何样式库？样式是否与您已放下的样式相匹配。如果它正常工作，它可能是相互冲突的CSS。

我刚刚跳过你的页面，看看看起来有一个影响布局的百分比属性，如果是我，我会在主体后面安排页脚清除

Ps nice mobile site

页脚和奇怪的间距和定位

2 个答案: