Question

我希望页脚被按下并显示为页面的最后一个元素。但是，之前的内容包装器的高度为100％。内容的高度超过了浏览器高度的高度。最后，页脚出现在浏览器高度之后，而不是在内容包装器之后。如何更改它并且仍然具有背景设计所需的100％高度的包装。

HTML

<div class="content_wrap">
content wrap
<div class="item">content</div>
</div>
<footer>footer</footer>

CSS

body, html{
  height: 100%;
}

.content_wrap{
  height: 100%;
  width: 100%;

  border: 2px solid black;
}

.item{
  height: 1300px;
  width: 100%;

      background: red;
}

footer{
  height: 100px;
  width: 100%;
  background: yellow;
}

Answer 1

给出相对的身体位置属性值和绝对值的位置属性值。页脚的底值 - （页脚高度）

  body {
  height: 100%;
  position: relative;
}
.content_wrap {
  height: 100%;
  width: 100%;
  border: 2px solid black;
}
.item {
  height: 1300px;
  width: 100%;
  background: red;
}
footer {
  height: 100px;
  width: 100%;
  background: yellow;
  position: absolute;
  bottom:-100px; /* minus the height of the Footer and it wont overlap any other element */
}

<div class="content_wrap">
content wrap
<div class="item">content</div>
</div>
<footer>footer</footer>

Answer 2

footer{ position: fixed
        bottom: 0px;
}

可能重复：Bottom footer

Answer 3

如果您在min-height: 100%上使用height: 100%而不是content_wrap，它将至少占屏幕高度的100％，如果其中的内容较大，它将会增长。< / p>

＆＃13;

body, html{
  height: 100%;
}

.content_wrap{
  min-height: 100%;
  width: 100%;

  border: 2px solid black;
}

.item{
  height: 1300px;
  width: 100%;
  background: red;
}

footer{
  height: 100px;
  width: 100%;
  background: yellow;
}

＆＃13;

<div class="content_wrap">
  content wrap
  <div class="item">content</div>
</div>
<footer>footer</footer>

＆＃13;

Answer 4

    body{
      display:flex;
flex-flow:column;
height:100%;
    }

    header{
      flex:0 0 75px;
    }

    .middle-container{
      display:flex;
flex: 1 0 auto;
    }

    footer{
      flex: 0 0 25px;
    }
    <header>Header</header>
    <div class="middle-container">
      content wrap
      <div class="item">content</div>
    </div>
    <footer>footer</footer>

HTML - 页脚不在底部

4 个答案: