routerview被footer盖住
时间: 2023-10-22 17:31:23 浏览: 51
在页面中,当使用position:fixed来实现Footer时,可能会导致Routerview被Footer盖住的问题。有两种解决方案可以解决这个问题。
方案一是在Footer块之外再包裹一层div,然后再增加一个与Footer同级的div块,当div块的高度和Footer一样的时候,主页面就会有一个和Footer一样大小的padding,从而避免被Footer盖住。可以按照以下代码进行操作:
<div>
<div style="height:60px;"></div>
<p></p>
<section class='footer'>
<div class='reply-topic'>Footer内容</div>
</section>
</div>
方案二是通过设置CSS样式来解决。可以给Footer设置position:absolute; bottom:0; width:100%; height:100px;来固定在页面底部,并通过@media screen and (max-height: 768px)来在屏幕高度小于768像素时隐藏Footer,从而避免盖住Routerview。可以按照以下代码进行操作:
#myFooter{
position:absolute;
bottom:0;
width:100%;
height:100px;
background-color: transparent;
}
@media screen and (max-height: 768px){
#myFooter{
display: none;
}
}<span class="em">1</span><span class="em">2</span><span class="em">3</span>
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)