如何仅使用 html css 创建具有固定位置 header 和侧边导航的响应式页面？
How do i create a responsive page with fixed positioned header and side nav using only html css?
我已经自学 html/css 几天了。这可能可以使用 javascript 或其他东西。但是在我首先知道 html/css 的限制之前，我不想继续学习其他任何东西。我已经完成了我要求的事情，但我想知道是否有 easier/cleaner 方法可以做到这一点。我没有使用任何固定的宽度或高度，以便它保持完全响应。
我想出如何保持固定位置的 header 和侧面导航在没有 main/scrolling 默认情况下位于它们下方的内容的唯一方法是将重复的填充内容直接放在固定位置的内容下方以保持正确的间距。
* {box-sizing:border-box;}
.row::after { content: "";
clear: both;
display: block;}
[class*="col-"] {float: left;
padding: 15px;}
.col-3 {width: 25%;}
.col-6 {width: 50%;}
body {margin:0;}
.header-navbar { position: fixed;
width:100%;}
.header {background-color:white;
font-size:40px;}
.navbar {background-color:black;
text-align:right;}
.navbar a {text-decoration:none;
color:white;
font-size:20px;
display:inline-block;
padding:15px;}
.navbar a:hover {background-color:red;}
.title-sidenav {position:fixed;
background-color:white;}
.sidenav a {display:block;
text-decoration:none;
font-size:20px;
color:white;
background-color:black;
padding:15px;
border-radius:10px;
border:1px solid white;}
.sidenav a:hover {background-color:red;}
.main {border-left:1px dotted black;
border-right:1px dotted black}
.footer {text-align:center;
background-color:black;
color:white;}
@media only screen and (max-width: 768px) {[class*="col-"] {width:100%;}
.navbar {text-align:center;}
.sidenav {text-align:center;}
.sidenav a{display:inline-block;}}
<div class="header-navbar">
<div class="header">
Title
</div>
<div class="navbar">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</div>
</div>
<!-- nav-header filler content start -->
<div class="header">
Title
</div>
<div class="navbar">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</div>
<!-- nav-header filler content end -->
<div class="row">
<div class="col-3 title-sidenav">
<h2>Column 1 Title</h2>
<div class="sidenav">
<a href="#">Links</a>
<a href="#">Links</a>
<a href="#">Links</a>
<a href="#">Links</a>
<a href="#">Links</a>
</div>
</div>
<!-- column 1 filler content start -->
<div class="col-3">
<h2>Column 1 Title</h2>
<div class="sidenav">
<a href="#">Links</a>
<a href="#">Links</a>
<a href="#">Links</a>
<a href="#">Links</a>
<a href="#">Links</a>
</div>
</div>
<!-- column 1 filler content end -->
<div class="col-6 main">
<h2>Column 2 Title</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<h2>Column 2 Title</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<h2>Column 2 Title</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div class="col-3">
<h2>Column 3 Title</h2>
</div>
</div>
<div class="footer">
<h6>Footer</h6>
</div>
这个内容填充器看起来不太好，但似乎必须要有它才能实现我想要的。它还必须是相同数量的内容才能使响应能力正常工作。例如，如果我在顶部导航栏填充器 div 中只有一个重复项 link，当视口很大时，它将保留固定位置导航 bar/links 的所有正确间距，因此它下面的内容不会在导航下方弹出。但是，当它缩小到移动尺寸时，顶部导航 link 会移出屏幕或消失。但是不知何故，当所有 5 个 filler top nav links 都在那里时，固定位置的 links 能够与 filler links 一起下降。我觉得这很奇怪，因为我认为固定定位的导航将完全独立于填充导航。所以无论如何。有没有更简单的方法只使用 html/css?
发生的事情是，对于固定内容，如果您希望它位于其下方的任何内容之上，则需要声明一个 z-index。
当您将填充内容更改为 1 link 时，内容似乎真的离开了页面 link，但实际上填充内容位于固定内容之上。
如果将导航栏的位置设置为相对位置，然后将固定导航栏的 z-index 设置为 5，将填充导航栏的 z-index 设置为 1，您会看到内容确实是静止的在那里，现在在上面。
我们通常使用 javascript 来避免这种情况的原因是，当您可以很容易地使用 JS 获取内容的高度并添加边距时，您正在重复代码并需要维护更多代码-top to the body content =到那个高度。或者，您可以让内容最初不固定，这样当您想要保持固定的内容到达屏幕顶部时，您可以通过 JS 添加一个 class，然后应用固定位置。
所以从技术上讲，您可以按照自己的方式进行，您只需要拥有完全重复的代码，这不利于可访问性，而且维护起来很烦人。
我已经自学 html/css 几天了。这可能可以使用 javascript 或其他东西。但是在我首先知道 html/css 的限制之前，我不想继续学习其他任何东西。我已经完成了我要求的事情，但我想知道是否有 easier/cleaner 方法可以做到这一点。我没有使用任何固定的宽度或高度，以便它保持完全响应。 我想出如何保持固定位置的 header 和侧面导航在没有 main/scrolling 默认情况下位于它们下方的内容的唯一方法是将重复的填充内容直接放在固定位置的内容下方以保持正确的间距。
* {box-sizing:border-box;}
.row::after { content: "";
clear: both;
display: block;}
[class*="col-"] {float: left;
padding: 15px;}
.col-3 {width: 25%;}
.col-6 {width: 50%;}
body {margin:0;}
.header-navbar { position: fixed;
width:100%;}
.header {background-color:white;
font-size:40px;}
.navbar {background-color:black;
text-align:right;}
.navbar a {text-decoration:none;
color:white;
font-size:20px;
display:inline-block;
padding:15px;}
.navbar a:hover {background-color:red;}
.title-sidenav {position:fixed;
background-color:white;}
.sidenav a {display:block;
text-decoration:none;
font-size:20px;
color:white;
background-color:black;
padding:15px;
border-radius:10px;
border:1px solid white;}
.sidenav a:hover {background-color:red;}
.main {border-left:1px dotted black;
border-right:1px dotted black}
.footer {text-align:center;
background-color:black;
color:white;}
@media only screen and (max-width: 768px) {[class*="col-"] {width:100%;}
.navbar {text-align:center;}
.sidenav {text-align:center;}
.sidenav a{display:inline-block;}}
<div class="header-navbar">
<div class="header">
Title
</div>
<div class="navbar">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</div>
</div>
<!-- nav-header filler content start -->
<div class="header">
Title
</div>
<div class="navbar">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</div>
<!-- nav-header filler content end -->
<div class="row">
<div class="col-3 title-sidenav">
<h2>Column 1 Title</h2>
<div class="sidenav">
<a href="#">Links</a>
<a href="#">Links</a>
<a href="#">Links</a>
<a href="#">Links</a>
<a href="#">Links</a>
</div>
</div>
<!-- column 1 filler content start -->
<div class="col-3">
<h2>Column 1 Title</h2>
<div class="sidenav">
<a href="#">Links</a>
<a href="#">Links</a>
<a href="#">Links</a>
<a href="#">Links</a>
<a href="#">Links</a>
</div>
</div>
<!-- column 1 filler content end -->
<div class="col-6 main">
<h2>Column 2 Title</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<h2>Column 2 Title</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<h2>Column 2 Title</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div class="col-3">
<h2>Column 3 Title</h2>
</div>
</div>
<div class="footer">
<h6>Footer</h6>
</div>
这个内容填充器看起来不太好，但似乎必须要有它才能实现我想要的。它还必须是相同数量的内容才能使响应能力正常工作。例如，如果我在顶部导航栏填充器 div 中只有一个重复项 link，当视口很大时，它将保留固定位置导航 bar/links 的所有正确间距，因此它下面的内容不会在导航下方弹出。但是，当它缩小到移动尺寸时，顶部导航 link 会移出屏幕或消失。但是不知何故，当所有 5 个 filler top nav links 都在那里时，固定位置的 links 能够与 filler links 一起下降。我觉得这很奇怪，因为我认为固定定位的导航将完全独立于填充导航。所以无论如何。有没有更简单的方法只使用 html/css?
发生的事情是，对于固定内容，如果您希望它位于其下方的任何内容之上，则需要声明一个 z-index。
当您将填充内容更改为 1 link 时，内容似乎真的离开了页面 link，但实际上填充内容位于固定内容之上。
如果将导航栏的位置设置为相对位置，然后将固定导航栏的 z-index 设置为 5，将填充导航栏的 z-index 设置为 1，您会看到内容确实是静止的在那里，现在在上面。
我们通常使用 javascript 来避免这种情况的原因是，当您可以很容易地使用 JS 获取内容的高度并添加边距时，您正在重复代码并需要维护更多代码-top to the body content =到那个高度。或者，您可以让内容最初不固定，这样当您想要保持固定的内容到达屏幕顶部时，您可以通过 JS 添加一个 class，然后应用固定位置。
所以从技术上讲，您可以按照自己的方式进行，您只需要拥有完全重复的代码，这不利于可访问性，而且维护起来很烦人。