Question

您好我最近制作了我的网站导航＆＃34;粘贴＆＃34; for：https://shiftins.com。唯一的问题是导航的高度已经从页面中移除，看起来它变成了一个单独的层，并且＃34;浮动＆＃34;在页面上。它最终隐藏了我的页面内容的一些顶部部分。我尝试将边距和填充添加到各种容器中，但是在整个网站上有太多不同的容器。是否有解决方案可以使我的网站荣获粘性导航网站的高度？

以下是我使用的代码：

.site-header {
position: relative;
z-index: 999;
background: #0074E5;
background: #0c5798;
height: 60px;
box-shadow:inset 0 1px 7px rgba(0, 0, 0, 0.2);
}

.site-header .wrap {
padding: 0;
}

.site-header {
position: fixed;
width:100%;
height: 60px;
}

Answer 1

您的固定标题需要top:0;。然后将边距添加到类似site-container的全局div中，如下所示：

.site-container{
    margin-top: 60px;
}

.site-header {
position: fixed;
width:100%;
height: 60px;
top:0;
}

Answer 2

float元素总是删除父高度，因此你必须在父元素上使用overflow：hidden：或者应用 clearfix hack / class

请参阅此Css trick

浮动导航高度从页面中删除

2 个答案: