Question

所以小伙子们，我只是试图拥有一个干净的页脚，它将始终显示在页面内容的末尾，无论内容是否填满了页面的长度。

截至目前，我已经尝试了一些选项，首先，我已经用粘性页脚完成了它：

html,
body {
    margin:0;
    padding:0;
    height:100%;
}

#wrapper {
    min-height:100%;
    position:relative;
}
header {
    padding: 1em;
    background:#EFDECD; //#5ee;
    text-align: center;

}

.mydiv{
height:calc(100% - 4em);
}
p{
font-family: Verdana, Geneva, sans-serif;
}
.paragraph{
font-size: 1em;
//font-family:  Charcoal, sans-serif;
}
#content {
    padding: 1em;
    padding-bottom: 7em;   /* Height of the footer element */
}
footer {
    display: block;
    width:100%;
    height:4em;
//  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;
    }
}

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

.headingtext{
font-family:  Century Gothic, sans-serif;

}
.headtext{
    display:inline-block;
 //   font-size:3em;
    margin: 0 10em;
    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;}


.top-bar-section .right li .dropdown { /* left: auto; */ right: auto; }

dl.tabs dd {background-color：$ oil;} 哪个有效，但页面上有重要内容时，页脚总是可见并占用屏幕空间。

理想情况下，我希望将这个职位改为绝对的＆＃39;并且在所有页面上看起来都很好，除了在没有足够内容的页面上，然后页脚出现在内容的正下方，并且从页脚到页面的底部留下了大的空白间隙。

我怎样才能简单地制作它，这样无论页面长度如何，页脚总是出现在页面底部？另外，随意检查元素以帮助。目前它使用固定位置：

http://ops.emsofl.com/

Answer 1

一种方法：将body和html设置为100％高度，然后：

<div style="height:calc(100% - 30px);">
     <!-- 30px for footer -->
     <!-- header and content will be here -->
</div>
<footer style="height:30px;">must be fixed height</footer>

因此，如果您的内容很长，页脚会显示在页面后面，如果页面为空，则div会占用整个屏幕。

更新尝试它是否适用于您的浏览器jsfiddle

P.S。我有一个小的上网本，并没有看到你的页面，只是页眉，页脚和两行内容（好的，可能是十行:)）

Answer 2

您可以将页脚移动到内容div中，并使用您执行的position: absolute方法。

看来你的身体标签没有达到页面的整个高度..这可能是因为你是浮动元素而没有正确清除它们，或者你正在使用内容div中的元素，这些元素位于绝对位置。我还没有真正检查过页面的其余部分..

希望这有帮助。

获得一致的页脚间距

2 个答案: