html怎么把页脚放到最小编,CSS使HTML页脚保持在页面底部的最小高度，但不重叠页面...

MMTTMM

我已经开发了一个非常简单的方法来将页脚放在底部，但是作为最常见的方法，您将需要调整它以适应您的页脚的高度。视图演示下面的方法通过放置::after上的伪元素。body，并将其设置为精确性页脚的高度，因此它将占用与页脚完全相同的空间，因此当页脚是absolute放置在它上面，它看起来就像页脚真的占据了空间，消除了它的绝对定位的负面影响(例如，检查身体的内容)。基本通用标记html{ height:100%; }body{ min-height:100%; padding:0; margin:0; position:relative; }header{ height:50px; background:lightcyan; }footer{ background:PapayaWhip; }/* Trick: */body {  position: relative;}body::after {  content: '';  display: block;  height: 50px; /* Set same as footer's height */}footer {  position: absolute;  bottom: 0;  width: 100%;  height: 50px;}

  Header  Content  Footer下面的方法允许动态页脚高度：使用挠曲箱html, body{ height:100%; margin:0; }header{ height:50px; background:lightcyan; }footer{ height:50px; background:PapayaWhip; }/* Trick */body{   display:flex;   flex-direction:column; }footer{  margin-top:auto; }   Header  Content  Footer使用表-布局html,body { height: 100%;  margin: 0; }header {  height: 50px;  background: lightcyan;}footer {  height: 50px;  background: PapayaWhip;}/**** Trick: ****/body {  display: table;  width: 100%; }footer {   display: table-row;}  Header  Content  Footer