Question

我试图让我的页脚在屏幕变小时消失，但是具有绝对设置的页脚会不断遮盖我的标题和内容。

我该如何设置页脚？

css代码

.body {
margin: 0;
min-width: 1000px;
}
.login {
background-color: #2797E9;
border-bottom: 5px solid grey;
height: 50px;
text-align: center;
}
.nav {
margin: 0 auto;
width: 1000px;
height: 40px;
border: 5px solid blue;
}
.mainleft {
width: 500px;
border: 5px solid black;
display: inline-block;
}
.mainright {
width: 500px;
border: 5px solid pink;
display: inline-block;
}
.footer {
border:5px solid green;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
height: 50px;
text-align: center;
}

Answer 1

尝试媒体查询：

@media (max-width:768px) {

    .footer {
        display: none;
    }

}

小提琴：http://jsfiddle.net/LGmxh/

您可以适当调整宽度。还有一个最大高度查询（以及最小高度，高度，宽度，最小宽度）以及更多可用https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

当重新调整屏幕尺寸时，会出现页脚

1 个答案: