如何保持页脚底部

我已经尝试了一切，但页脚不在页面的底部。我试过position: fixed;，但总是向下滚动时它保持在同一位置。如何保持页脚底部

.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -142px; 
} 

.footer, .push { 
    height: 142px; 
    background: black; 
}

来源

2017-09-23 Zerry

尝试这种.footer { 位置是：固定; left：0px; bottom：0px; height：30px; 宽度：100％; 背景：黑色; } – Rakib

你是在谈论粘页脚还是应该在页面底部的页脚？ –

就在页面的底部。我试过位置：固定; bottom：0; – Zerry

使用下面的CSS：

.footer { 
    position:fixed; 
    left:0px; 
    bottom:0px; 
    height:142px; 
    width:100%; 
background:black; 
}

这里是测试提琴：https://jsfiddle.net/85nyb2mv/

来源

2017-09-23 10:24:52 Rakib

如果使用position: fixed，该元素将始终位于屏幕的同一位置。如果您希望页脚位于包装元素的底部，请尝试将position: relative改为.wrapper和position: absolute改为.footer，它会将页脚置于包装的底部。这里有一个例子：

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.wrapper { 
 
min-height: 100%; 
 
height: auto !important; 
 
height: 100%; 
 
margin: 0 auto -142px; 
 
background-color: gray; 
 
position: relative; 
 
} 
 

 
.footer, .push { 
 
height: 142px; 
 
width: 100%; 
 
background: black; 
 
position: absolute; 
 
bottom: 0; 
 
left: 0; 
 
}

<div class="wrapper"> 
 
    <div class="footer"></footer> 
 
</div>

来源

2017-09-23 10:25:56

使用该CSS样式：

.wrapper { 
    height: calc(100% - 142px); 
    margin: 0 auto; 
} 

.footer { 
    height: 142px; 
    background: black; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    z-index: 1; 
}

来源

2017-09-23 10:29:41 IamMHussain

CASE 1

当body“height是大于100vh

body{ 
 
    margin: 0; 
 
    padding: 0; 
 
    min-height: 100vh; 
 
    height: 2000px; 
 
    position: relative; 
 
    background: pink; 
 
} 
 
header{ 
 
    width: 100vw; 
 
    height: 100px; 
 
    background: gold; 
 
} 
 
footer{ 
 
    position: absolute; 
 
    bottom: 0px; 
 
    left: 0px; 
 
    width: 100vw; 
 
    height: 100px; 
 
    background:darkgray; 
 
}

<body> 
 
    <header> 
 
    </header> 
 
    <footer> 
 
    </footer> 
 
</body>

CASE 2

当body“height小于100vh

body{ 
 
    margin: 0; 
 
    padding: 0; 
 
    min-height: 100vh; 
 
    height: 200px; 
 
    position: relative; 
 
    background: pink; 
 
} 
 
header{ 
 
    width: 100vw; 
 
    height: 100px; 
 
    background: gold; 
 
} 
 
footer{ 
 
    position: absolute; 
 
    bottom: 0px; 
 
    left: 0px; 
 
    width: 100vw; 
 
    height: 100px; 
 
    background:darkgray; 
 
}

<body> 
 
    <header> 
 
    </header> 
 
    <footer> 
 
    </footer> 
 
</body>

来源

2017-09-23 10:30:01 zynkn

**html** 
<body> 
    <header> 
    </header> 
    <section> 
    </section> 
    <footer> 
    </footer> 
</body> 

**CSS** 
<style type="text/css"> 
footer { 
    position:fixed; 
    left:0px; 
    bottom:0px; 
    width:100%; 
    background:black; 
    color:#fff; 
    z-index:99; 
} 
</style>

来源

2017-09-23 11:34:56

问题是<div class="fade">，所以我删除它，并加入

.page-content:after { 
    content: ""; 
    display: block; 
}

<div class="page-content"> ---->页眉和页脚之间

来源

2017-09-24 11:26:01 Zerry

如何保持页脚底部

回答

相关问题