制作粘性页脚

Question

我正试图制作一个粘性页脚，但我似乎无法完全正确。我真的不知道如何描述这个没有显示一些屏幕截图和一些CSS。这里是。

现在我的页脚似乎已被修复，因为它将位于内容之上，但我没有设置public class ServiceAccessor { static string serviceUrl = "http://172.16.12.17:7698/HisDashboardService/"; public static readonly EndpointAddress ProfilerServiceEndPoint = new EndpointAddress(serviceUrl + "ProfilerService.svc"); private ProfilerServiceClient _profilerServiceClient; private static ServiceAccessor _instanceServiceAccessor; public static ServiceAccessor Instance { get { return _instanceServiceAccessor ?? (_instanceServiceAccessor = new ServiceAccessor()); } } ServiceAccessor() { InitializeServiceClient(); } private void InitializeServiceClient() { BasicHttpBinding binding = CreateBasicHttp(); #region ProfilerService _profilerServiceClient = new ProfilerServiceClient(binding, ProfilerServiceEndPoint); #endregion ProfilerService } private static BasicHttpBinding CreateBasicHttp() { BasicHttpBinding binding = new BasicHttpBinding { Name = "basicHttpBinding", MaxBufferSize = 2147483647, MaxReceivedMessageSize = 2147483647 }; TimeSpan timeout = new TimeSpan(1, 0, 0); binding.SendTimeout = timeout; binding.OpenTimeout = timeout; binding.ReceiveTimeout = timeout; return binding; } } 。以下是发生的事情的截图

我显然希望内容可以压下页脚。这是页脚和容器的CSS：

页脚CSS

fixed position

CONTAINER

.footer {
  height: 40px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  text-align: center;
}

APPLICATION HTML

body {
  color: $base-text-color;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: $base-background-color;
}

.container {
  max-width: 1200px;
  margin: 18px auto 0;
  text-align: center;
  min-height: 100%;
}

希望这是足够的信息。谢谢你的帮助！

Answer 1

这里有几个问题：

1. 不要将容器的最小高度设为100％;
2. 不要给身高100％;

3. 给容器的页脚位置：相对; 并使自己成为一个习惯，总是给定位绝对元素的父级，“位置：相对”;

   body {
    color: red;
    margin: 0;
    padding: 0;
    background-color:pink;
    border :  6px solid black;
    position:relative;
   }
   
   .container {
     max-width: 1200px;
     margin: 18px auto 0;
     text-align: center;
   }
   
   .footer {
     height: 40px;
     width: 100%;
     position: absolute;
     left: 0;
     bottom: 0;
     text-align: center;
   }
   

Answer 2

你的身体没有填满屏幕。您可以设置：

body{ min-height: 100vh; position:relative;}

Answer 3

使用给定的代码，我会这样做，我将container设置为完整视口高度，从中减去边距和页脚高度，然后删除绝对位置。

当内容较小时，这将使页脚保持在底部，当内容增长时将其向下推。

也可以使用flexbox，但只要知道了页脚的高度，这就是最简单且工作得很好的跨浏览器。

＆＃13;

＆＃13;

html, body {
  color: blue;
  margin: 0;
  background-color: lightgray;
}
.container {
  max-width: 1200px;
  margin: 18px auto 0;
  text-align: center;
  min-height: calc(100vh - 18px - 40px);
}
.footer {
  height: 40px;
  width: 100%;
  text-align: center;
  background: lightblue;
}

＆＃13;

  <div class="container">
    Container<br>
    Container<br>
    Container<br>
    Container<br>
    Container<br>
    Container<br>
    Container<br>
    Container<br>
    Container<br>
    Container<br>
    Container<br>
  </div>
  <div class="footer">
    Footer
  </div>

＆＃13;

＆＃13;

＆＃13;