Html 位置绝对包装后的粘性页脚

我有一个包装，需要水平居中。除了使用绝对位置，我知道没有其他方法可以做到这一点

#wrapper {
    width: 721px;
    height: 720px;
    position: absolute;
    margin: auto;
    top: 136px;
    left: 0;
    right: 0;
    background: white;
    clear: both;
}

它包含另外三个浮动的div。若我将包装器的位置更改为“相对”，那个么这些div就会出错

____________________________________________
header
____________________________________________

         __wrapper____________
         |         |          |
         |         |          |
         |  div1   | div2     |
         |         |          |
         |         |          |
         |         |          |
         |_________|__________|
         |     div3           |
         |____________________|

__________________________________________
footer
__________________________________________

但我想有一个粘性页脚，这将始终在网站的底部。无论我有多少内容，它都将停留在它的底部。如果我的包装不是position:absolute，我可以实现它，但是因为它不能推动页脚底部，我想知道还有其他方法可以做到吗

.footer {
    border-top: 1px solid #dcdcdc;
    max-width: 100vw;
    font-weight: bold;
    text-align: center;
    background: #f0f0f0;
    width: 100%;
    height: 80px;
}

正如您在页脚中看到的，隐藏在页眉后面

您正在使用引导程序吗？ 使用bootstrap，您的布局将与以下代码一样简单：

<div class="navbar navbar-fixed-top">
  you header
</div>

<div class="row">
 <div class="col-md-3 col-md-offset-3">
   your div1
 </div>
 <div class="col-md-3 col-md-offset-6">
   your div2
 </div>
</div>
<div class="row">
 <div class="col-md-6 col-md-offset-3">
   your div3
 </div>
</div>


<div class="navbar navbar-fixed-bottom">
  your footer
</div>

因为这应该在顶部和底部都适合导航栏

编辑：因为您不使用框架，所以：

将此添加到css页脚

position: fixed;
bottom: 0;

---

这将向您显示页脚，因为它隐藏在页眉后面。

您应该尝试CSS的

clear

属性（在我的例子中，我使用了一个名为

clearfix

的

div

类），将其放在

之后。框2

如下：

.clearfix:after {
  content: '';
  display: table;
  clear: both;
}
.clearfix:before {
  content: '';
  display: table;
}

查看下面的代码段（使用全屏模式）：

.header{
最小宽度：720px；
排名：0；
左：0；
右：0；
最大宽度：100vw；
线高：80px；
字体大小：粗体；
文本对齐：居中；
保证金：0自动；
边框底部：1px实心#DCDC；
背景：#f0；
位置：固定；
宽度：100%；
高度：80px；
z指数：1；
}
#包装纸{
边框：1px纯蓝色；
宽度：721px；
背景：白色；
利润率：120px自动40px；
}
.box1{
明确：两者皆有；
显示：内联块；
浮动：左；
高度：300px；
宽度：360px；
边框：1px纯黑；
}
.box2{
明确：两者皆有；
显示：内联块；
浮动：对；
高度：300px；
宽度：350px；
边框：1px纯黑；
}
.页脚{
边框顶部：1px实心#DCDC；
最大宽度：100vw；
字体大小：粗体；
文本对齐：居中；
背景：#f0；
宽度：100%；
高度：80px；
}
.clearfix:之后{
内容：''；
显示：表格；
明确：两者皆有；
}
.clearfix:以前{
内容：''；
显示：表格；
}

Asdf
asdf
asdf
asdafafafsaf

这是一个粗略的组合，但在现代web开发中，我们享受到了奇妙的flexbox带来的乐趣。下面是一个简单的例子

<div class="wrapper">
<div class="flex-wrapper">
  <div class="flex-container">
    <div class="div1">Box1</div>
    <div class="div2">Box2</div>
  </div>
  <div class="div3">Box3</div>
</div>
</div>

.wrapper {
  display:flex;
  justify-content: center;
  align-content: center;
  height: 500px;
}
.flex-wrapper {
  display:flex;
  flex-direction: column;
  align-self: center

}
.flex-container{
  display: flex;
  position: relative;
}
.div1,.div2 {
  height:100px;
  width:100px;
}
.div1 {
  background-color:blue;
}
.div2 {
  background-color:red;
}
.div3 {
  background-color:green;
  width:200px;
  height:100px;
}

框1
框2
框3
.包装纸{
显示器：flex；
证明内容：中心；
对齐内容：居中对齐；
高度：500px；
}
.柔性包装{
显示器：flex；
弯曲方向：立柱；
自对准：居中
}
.柔性容器{
显示器：flex；
位置：相对位置；
}
.div1、.div2{
高度：100px；
宽度：100px；
}
.1分部{
背景颜色：蓝色；
}
.第2分部{
背景色：红色；
}
.第3分部{
背景颜色：绿色；
宽度：200px；
高度：100px；
}

只需使用这种类型的布局，但在“包装器”周围制作另一个容器，这样页脚就不会受到影响

---

另外，如果您不熟悉flexbox:

如果您不想使用flex，这可能会有所帮助

首先，不必使用绝对位置来水平对齐div

<div id="outer">
 <div id="inner">
 </div>
</div>

<style>
 #outer {
  background-color: green;
 }
 #inner {
  left: 0;
  right: 0;
  margin: auto;
  height: 300px;
  width: 400px;
  background-color: red;
 }
</style>

#外{
背景颜色：绿色；
}
#内在的{
左：0；
右：0；
保证金：自动；
高度：300px；
宽度：400px；
背景色：红色；
}

这是小提琴

浮动内部div将包装的高度降至0px。因此，用display:inline块替换float可能会有所帮助

<style>
#header {
    width: 100%;
    height: 50px;
    background-color: pink;
}
#wrapper {
    left: 0;
    right: 0;
    margin: auto;
    width: 60%;
}
#div1 {
    width: 30%;
    height: 400px;
    display: inline-block;
    background-color: grey;
}
#div2 {
    display: inline-block;
    width: 60%;
    height: 400px;
    background-color: red;
}
#div3 {
    width: 100%;
    height: 400px;
    display: inline-block;
    background-color: blue;
}
#footer {
    width: 100%;
    height: 50px;
    background-color: green;
}
</style>
<div id="header">
    Hey i'm header
</div>

<div id="wrapper">
<div id="div1">
    first div
</div>
<div id="div2">
    second div
</div>
<div id="div3">
    third div
</div>
</div>


<div id="footer">
    Hey i'm footer
</div>

#标题{
宽度：100%；
高度：50px；
背景颜色：粉红色；
}
#包装纸{
左：0；
右：0；
保证金：自动；
宽度：60%；
}
#第一组{
宽度：30%；
高度：400px；
显示：内联块；
背景颜色：灰色；
}
#第二组{
显示：内联块；
宽度：60%；
高度：400px；
背景色：红色；
}
#第三组{
宽度：100%；
高度：400px；
显示：内联块；
背景颜色：蓝色；
}
#页脚{
宽度：100%；
高度：50px；
背景颜色：绿色；
}
嘿，我是队长
第一组
第二组
第三组
嘿，我是footer

小提琴：

---

或者，如果您希望页脚保持在视口底部，只需使用

position:fixed；底部：0在页脚中发布完整的代码snippet@SauravRastogi添加了JS FiddleNo我没有使用任何框架。我这么做是纯粹的。我猜你没有仔细阅读这个问题。我的包装纸有位置：绝对，我不能没有它，因为里面的提琴都飘走了。@Mirakurun，但我想这也会给人同样的感觉，并随你的小提琴而落下。
<style>
#header {
    width: 100%;
    height: 50px;
    background-color: pink;
}
#wrapper {
    left: 0;
    right: 0;
    margin: auto;
    width: 60%;
}
#div1 {
    width: 30%;
    height: 400px;
    display: inline-block;
    background-color: grey;
}
#div2 {
    display: inline-block;
    width: 60%;
    height: 400px;
    background-color: red;
}
#div3 {
    width: 100%;
    height: 400px;
    display: inline-block;
    background-color: blue;
}
#footer {
    width: 100%;
    height: 50px;
    background-color: green;
}
</style>
<div id="header">
    Hey i'm header
</div>

<div id="wrapper">
<div id="div1">
    first div
</div>
<div id="div2">
    second div
</div>
<div id="div3">
    third div
</div>
</div>


<div id="footer">
    Hey i'm footer
</div>