Web前端笔记-footer始终固定在底部及高度缩小时不显示

方法步骤：

①使用css将footer设置到底部；

②使用css响应式当高度小于多少时，不显示。

对应的footer代码如下：

<footer id="myFooter" class="text-white" id="myFooter">
	<ul class="nav justify-content-center mb-3">
		<li class="nav-item"><a href="#" class="nav-link px-2 text-white">新时代程序员群</a></li>
		<li class="nav-item"><a href="#" class="nav-link px-2 text-white">联系站长</a></li>
		<li class="nav-item"><a href="#" class="nav-link px-2 text-white">大屏展示站点</a></li>
		<li class="nav-item"><a href="#" class="nav-link px-2 text-white">CSDN IT1995</a></li>
		<li class="nav-item"><a href="#" class="nav-link px-2 text-white">About me</a></li>
	</ul>
	<p class="text-center text-white">Designed by IT1995</p>
</footer>

css如下：

#myFooter{
    position:absolute;
    bottom:0;
    width:100%;
    height:100px;
    background-color: transparent;
}
 
@media screen and (max-height: 768px){
 
    #myFooter{
 
        display: none;
    }
}

这里其他的css都是使用的是bootstrap

如：

.text-white {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}
 
.nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
 
.justify-content-center {
  justify-content: center !important;
}
 
.px-2 {
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important;
}