Question

让我再解释一下。

我一直在制作网页，顶部有一个导航栏。我决定将其修复并始终显示在页面顶部。

当我这样做时，过去位于导航栏下方的内容的顶部现在正在其下方滑动，因为该栏不再占用该空间。

有没有正确的方法来解决这个问题？我可以在内容的顶部添加填充，这意味着它不会从导航栏下方开始，但这似乎不是最好的解决方案。或者，我可以在导航栏下方创建一个不可见的div，以便占用空间......

有什么想法？我会尽快添加屏幕截图。

我使用＆＃34;位置：固定＆＃34;导航栏的属性。

Answer 1

我在实践中看到的最佳解决方案是将所有内容（包括标题）包装在包装器div中。保持标题的样式相同

position:fixed; top: 0;

然后将填充设置到包装div的顶部，该顶部等于标题的高度。

Answer 2

这是我大部分时间都这样做的。主要部分的边距，与顶部栏相同，为负。

＆＃13;

*{
  font-size:20px;
}
topbar{
  position:fixed;
  margin-top:-20px;
	
  display:block;
  background:red;
  width:100%;
}
main{
  margin-top:20px;
	
  background:yellow;
  width:100%;
  padding-right:10px;
}

＆＃13;

<topbar>Hey there</topbar>
<main>
  Here is<br>
  some<br>
  text<br>
  some<br>
  text<br>
  some<br>
  text<br>
  some<br>
  text<br>
  some<br>
  text<br>
  some<br>
  text<br>
</main>

＆＃13;

你可以忽略所有其他风格 - 它们是出于美学原因：）

如何正确处理网页顶部的固定导航栏？

2 个答案: