如何将导航栏与页面的其余部分分开答案

【问题标题】：How to separate nav bar from the rest of the page如何将导航栏与页面的其余部分分开
【发布时间】：2021-09-23 14:33:35
【问题描述】：

我是 Web 开发的新手，我正在 VSCode 中开发 Django 框架。我一直在尝试为 Web 应用程序制作一个用户界面，该界面在屏幕左侧有一个菜单，顶部有一个导航栏，上面写着“主页”（下图）。在那里，我需要将所有文本和照片放在页面的其余部分，当我向下滚动时，我只希望该部分移动，就像在真正的 Web 应用程序中一样。但我不知道该怎么做，我必须使用 JavaScript 还是只能在 HTML/CSS 中做？

正如您在图片中看到的那样，该段落覆盖了导航栏。

谢谢！

【问题讨论】：

标签： html css django web-applications

【解决方案1】：

很像position:fixed 你也可以给position: sticky

具有占用空间的额外好处

真正取决于您希望页面如何流动

【讨论】：

【解决方案2】：

您必须使用 base_generic_page 来包含所有应用程序页面。

basic_generic_page 有 nav_bar 或 side_bar

<html lang="en">
<head>
  {% block title %}<title>Local Library</title>{% endblock %}
</head>

<body>
  {% block sidebar %}<!-- insert default navigation text for every page -->{% endblock %}
  {% block content %}<!-- default content text (typically empty) -->{% endblock %}
</body>
</html>

您可以通过这种方式继承应用程序页面中的基础并重写内容块：

{% extends "base_generic.html" %}

{% block content %}
<h1>Local Library Home</h1>
<p>Welcome to <em>LocalLibrary</em>, a very basic Django website developed as a tutorial example on the Mozilla Developer Network.</p>
{% endblock %}

来源：https://developer.mozilla.org/es/docs/Learn/Server-side/Django/Home_page

【讨论】：

【解决方案3】：

您正在寻找的是 CSS position: fixed 属性。例如：

<div class="navbar" style="position: fixed;">

https://www.w3schools.com/howto/howto_css_fixed_menu.asp

【讨论】：