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

x33g5p2x  于2022-05-25 转载在 其他  
字(1.4k)|赞(0)|评价(0)|浏览(396)

方法步骤:

①使用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;
}

相关文章