CSS를 사용하여 바닥글을 하단에 배치하는 5가지 방법

<p>
    <!-- content -->
    </p><p></p>

<p>footer</p>

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.wrapper {
  min-height: 100%;  
  margin-bottom: -50px; /* 等于footer的高度 */
}
.footer, .push {
  height: 50px;
}

<p>
  </p><p>
    <!-- content -->
  </p>

<p>footer</p>

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
  margin-top: -50px;
}

.content {
  min-height: calc(100vh - 70px);
}
.footer {
  height: 50px;
}

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}