发布于 5年前

css 实现内容高度大于屏幕高度时跟随内容,小于屏幕高度居于底部

<div class="wrap">
  <div class="content">
    <div>first</div>
    <div>last</div>
  </div>
  <div class="fill"></div>
</div>
<div class="bottom">logo</div>

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

.wrap {
  width: 100%;
  min-height: 100%;
  background-color: burlywood;
}

.fill,
.bottom {
  height: 50px;
}

.bottom {
  margin-top: -50px;
  background-color: blue;
}

.content {
  height: 900px;
  background-color: yellow;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
CSS
©2020 edoou.com   京ICP备16001874号-3