Html 获取页脚以转到显示的底部

我得到了这个页脚，我想去我的显示器的底部，并留在那里（与其说是一个固定的位置，我希望它与它的内容改变）。目前，它是一个粘性的页脚，并与内容一起移动，我只是希望它不断地被放置在显示器的底部，这样就不会有这种奇怪的浮动间隙，它下面有一个巨大的空间

HTML:

内容CSS：

@charset "utf-8";
/*---------------------------- Content ----------------------------*/
.toptxt{
    margin-top:130px;
    width:100%;
}
/*.contactwrap{
    width:100%;                 change back if cant figure it out
    margin-top:60px;
}*/ 
.detailwrap{
    margin-top:100px;
    width:100%;
    text-align: center; /* center align .contacts */
}
/* clearfix */
.detailwrap:after {
    content: "";
    display: table;
    clear: both;
}
.infotxt{
    text-align: center;
    font-family: 'Raleway', sans-serif;
    font-size:2em;
    font-weight:400;
}
.contact {
    display: inline-block; /* make it possible to use text-align */
    width: 15%;
    min-width: 180px; /* avoid 15% being making the contacts less than 115px */
    margin: 4% 1% 10% 0;
}
.contact img{
    width: 90px;
    display: block;
    margin: 0 auto;
    max-width: 100%; /*bring back if needed*/
    height: auto;  /*bring back if needed*/
}
.contact .text {
    top:-15px;
    text-align:center;
    visibility:hidden;
}
.contact:hover .text {
    animation: fadein 2s;
    visibility:visible;
}
img.move2 {
    bottom:0px;
    transition: transform 1s cubic-bezier(0.2, 1, 0.44, 1.2);
}
img.move2:hover {
    -moz-transform: translate(-2px, -2px);
    -ms-transform: translate(-2px, -2px);
    -o-transform: translate(-2px, -2px);
    -webkit-transform: translate(-2px, -2px);
    transform: translate(0px, -10px)    
}
/*---------------------------- Footer ----------------------------*/
.footerwrap2{
    position:relative;
    width:100%;
    z-index:501;
    -moz-box-shadow: 0px -10px 20px 0px #000;
    -webkit-box-shadow: 0px -10px 20px 0px #000;
    box-shadow: 0px -10px 10px 0px #000;
}
/*---------------------------- Textfader ----------------------------*/
#test2 p {
    animation: fadein 5s;
    -moz-animation: fadein 5s; /* Firefox */
    -webkit-animation: fadein 5s; /* Safari and Chrome */
    -o-animation: fadein 5s; /* Opera */
    transition: opacity 5s;
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

---

我不太确定需要什么代码，并且有两个样式表可能会影响页脚分区……所以我基本上希望。即使在设备和浏览器大小更改后，页脚包装2仍位于浏览器底部。提前谢谢

我将您的所有代码复制到本地页面，并添加了以下行：

对于footerwrap2，我将位置从相对更改为绝对，并将其定位在页面底部

position:absolute; bottom: 0;

你可能已经发现，这还不够。body和wrapper div不知道内容页有多高，因此，它们根据内容确定大小

我通过向主包装器（.wrapper）添加以下样式解决了这个问题

它使用最新的CSS3视图高度，因此它只能在现代浏览器上工作。如果必须保持与旧浏览器的兼容性，则需要将主体、包装器以及可能的html标记的高度设置为100%

我在本地测试了它，它像冠军一样工作。如果你不能使它工作，我就把它移到小提琴上

---

祝你好运

你的问题有点难理解-你说

我得到了这个页脚，我想在我的显示器底部停留

然后你说

与其说是一个固定的位置，不如说是我希望它随其中的内容而改变

，然后你说

我只是希望它一直被放置在屏幕底部显示

-？？？基本上，如果其固定内容将位于其下方。我希望它在完全处于底部的情况下随内容移动。嘿，谢谢你！。。。。您是否认为有一种方法可以使用jquery或类似的东西来实现这一点？测试页面的高度，然后相应地移动页面？是的，您可以这样做。您必须绑定到某个调整大小事件，您知道当用户更改浏览器大小时，该事件将更改大小。这意味着，您必须将身高设置为100%，我不确定响应速度是否会像直接CSS解决方案那样快。根据我的经验，让浏览器为您尽可能多地工作是个好主意。您希望使用jQuery而不是CSS的具体原因是什么？

@charset "utf-8";
/*---------------------------- Content ----------------------------*/
.toptxt{
    margin-top:130px;
    width:100%;
}
/*.contactwrap{
    width:100%;                 change back if cant figure it out
    margin-top:60px;
}*/ 
.detailwrap{
    margin-top:100px;
    width:100%;
    text-align: center; /* center align .contacts */
}
/* clearfix */
.detailwrap:after {
    content: "";
    display: table;
    clear: both;
}
.infotxt{
    text-align: center;
    font-family: 'Raleway', sans-serif;
    font-size:2em;
    font-weight:400;
}
.contact {
    display: inline-block; /* make it possible to use text-align */
    width: 15%;
    min-width: 180px; /* avoid 15% being making the contacts less than 115px */
    margin: 4% 1% 10% 0;
}
.contact img{
    width: 90px;
    display: block;
    margin: 0 auto;
    max-width: 100%; /*bring back if needed*/
    height: auto;  /*bring back if needed*/
}
.contact .text {
    top:-15px;
    text-align:center;
    visibility:hidden;
}
.contact:hover .text {
    animation: fadein 2s;
    visibility:visible;
}
img.move2 {
    bottom:0px;
    transition: transform 1s cubic-bezier(0.2, 1, 0.44, 1.2);
}
img.move2:hover {
    -moz-transform: translate(-2px, -2px);
    -ms-transform: translate(-2px, -2px);
    -o-transform: translate(-2px, -2px);
    -webkit-transform: translate(-2px, -2px);
    transform: translate(0px, -10px)    
}
/*---------------------------- Footer ----------------------------*/
.footerwrap2{
    position:relative;
    width:100%;
    z-index:501;
    -moz-box-shadow: 0px -10px 20px 0px #000;
    -webkit-box-shadow: 0px -10px 20px 0px #000;
    box-shadow: 0px -10px 10px 0px #000;
}
/*---------------------------- Textfader ----------------------------*/
#test2 p {
    animation: fadein 5s;
    -moz-animation: fadein 5s; /* Firefox */
    -webkit-animation: fadein 5s; /* Safari and Chrome */
    -o-animation: fadein 5s; /* Opera */
    transition: opacity 5s;
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

position:absolute; bottom: 0;

height: 100vh;