可变高度的固定标头

当文档宽度大于760像素时，我有一个60px高度的标头。所以，身体显示在标题正下方并没有问题，但是当宽度变得更小时，其高度为两条线（120px），因此身体部分隐藏在顶部。可变高度的固定标头

我该如何解决这个问题？

这里是我使用的代码：

.main_header { 
    width:100%; 
    height:auto !important; 
    background-color:#F2F2F2; 
    border-bottom:1px solid #CCC; 
    position:fixed; 
    top:0px; 
    z-index:100; 
} 
.main_body { 
    margin:70px auto; 
}

注：页面响应。

来源

2014-10-11 Apalabrados

变化媒体查询。主要-body'保证金？ – 2014-10-11 18:57:59

太棒了！非常感谢。 – Apalabrados 2014-10-11 19:01:13

您可以先设置.main-body的边距为120px，这将适用于所有窗口大小。然后，您可以使用媒体查询覆盖特定宽度的边距。注意：使用您正在使用的CSS速记，main-body顶部和底部边距将受到影响。

<style> 
.main_body { 
    margin:120px auto; 
} 

@media(min-width: 761px){ 
    .main_body { 
     margin:70px auto; 
    } 
} 
</style>

媒体查询文件：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

来源

2017-07-20 11:02:47

可变高度的固定标头

回答

相关问题