我正在尝试制作一个具有标题和粘性水平菜单的页面。在其下方，左侧应该是一个粘性垂直菜单。页面的其余部分应该是内容。在图片中给出它:
为了实现这一点，我尝试使用网格，然后使用固定或绝对或相对位置的 div，等等。到目前为止，在查看了一堆示例后，我想到的最好的方法是:
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/layout.css">
</head>
<body>
<div class="header">
<h1>Banner</h1>
<p>Subtitle</p>
<div class="breadcrumbs">
<a class="menuitem button disabled">></a>
</div>
</div>
<div class="verticalMenu">
<a href="#" class="menuitem">Home</a><br>
<a href="#" class="menuitem">Map</a><br>
<a href="#" class="menuitem">1. </a><br>
<a href="#" class="menuitem">2. </a><br>
<a href="#" class="menuitem">3. </a><br>
<a href="#" class="menuitem">4. </a><br>
</div>
<div class="content" style="">
<button class="accordion">Intro</button>
<div class="panel">
<button class="accordion">Summary</button>
<div class="panel">
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, porro, beatae. Accusantium veniam iure quaerat temporibus ex, nam impedit! Voluptatem suscipit natus eligendi, consectetur ratione porro, facere iusto perferendis harum.</span>
<span>Accusamus praesentium dolore eveniet adipisci non, molestias ut repudiandae sunt. Libero modi in dignissimos dolore cumque mollitia possimus maiores repudiandae dolorum praesentium. Minima repudiandae inventore dolores numquam vitae, ipsa accusantium!</span>
<span>Eveniet magni tenetur similique quo possimus aperiam illo. Consectetur exercitationem delectus quibusdam ducimus possimus adipisci soluta ipsam iure animi, nisi, laborum autem doloremque nemo iste voluptatum explicabo quaerat! Hic, illo!</span>
<span>Eos quidem enim corrupti voluptates nesciunt temporibus, illum explicabo velit totam tempore ad eius, soluta. Ipsa velit recusandae in voluptates, numquam aperiam labore nobis non, fugiat qui? Similique, omnis, natus.</span>
<span>Quam, nulla, minus ipsum consectetur nesciunt veniam illum magnam facere, debitis fugit atque nihil tenetur. Animi a sit soluta in officia error? Quisquam reprehenderit repellendus facilis optio reiciendis soluta iste.</span>
<span>Recusandae quis molestias error in ab, labore quas officiis tempore omnis, beatae, corporis iste consequuntur veritatis. Debitis, veniam voluptatibus molestias dignissimos corporis, magni esse saepe harum rem dolorem neque fugiat.</span>
<span>Officia quo voluptatem ipsum, dolorum quisquam unde illum accusantium velit quidem similique magnam. Tempora, reprehenderit, veritatis! Incidunt neque, perferendis magnam, itaque vel sunt veniam consectetur vitae libero ipsam, dignissimos asperiores!</span>
<span>Quibusdam quae, incidunt accusamus sed cumque maxime reiciendis optio quasi similique, fugit, non facere placeat tempora. Ipsa, ea, dolorum! Labore nesciunt, distinctio inventore dolor ullam sint saepe incidunt enim molestias.</span>
<span>Placeat quod nulla, soluta distinctio quis consequuntur earum dicta quae rerum magnam tenetur iste nesciunt ab facilis eum suscipit, reprehenderit molestias repudiandae, repellendus adipisci eaque aperiam. Praesentium adipisci itaque quidem!</span>
<span>Error in, veritatis earum sit dignissimos numquam? Minus voluptatem, soluta blanditiis voluptatibus tenetur sapiente reprehenderit cupiditate impedit sed, consectetur fuga recusandae inventore, harum voluptates porro deserunt? Quae vero, necessitatibus dolorum?</span></p>
</div>
<button class="accordion">Section</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<script type="text/javascript" src="../js/layout.js"></script>
</body>
</html>
CSS
.content {
position: relative;
top: 150px;
left: 100px;
z-index: 1;
margin-bottom: 180px;
width: auto;
}
.verticalMenu {
display: inline-block;
position: fixed;
left: 0;
top: 150px;
width: 100px;
height: 100%;
}
.header {
position: fixed;
z-index: 100;
top: 0px !important;
width: 100%;
background: white;
}
.button {
background-color: blue;
color: white;
}
.breadcrumbs {
background-color: green;
position: fixed;
top: 110px;
left: 5px;
width: 100%;
}
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
display: none;
background-color: white;
}
.test {
position: absolute;
top: 150px;
left: 100px;
z-index: 1;
margin-bottom: 180px;
}
JavaScript
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
}
}
但现在我遇到了一个问题， Accordion 的按钮应该跨越屏幕的剩余宽度。然而，它似乎只跨越按钮文本的宽度。如果我在 CSS 中将包含元素(内容类)的宽度设置为 100%，那么这将超出窗口的宽度。我假设它这样做是因为我将横幅和导航栏的位置固定，然后为了将内容放在它应该出现的位置，我使用绝对位置对其进行偏移。然而，这只是改变了它，而不是“填充剩余空间”。因此，如果我强制宽度为 100%，则将占用 100% 的屏幕宽度，因此会在屏幕之外留下一个 block 偏移。
由于我遇到了大量这样的问题，而且每次我修复一个问题时最终都会遇到另一个问题，这让我怀疑我处理这个问题的方法是错误的。有没有更好的方法来制作粘性和非粘性成分，以便它们仍然填充空间而不溢出？感觉人们应该能够在屏幕上划出专门用于某些任务的部分，并在这些部分的内部，只需填充自己的 HTML 页面，这样一个地方的内容就不会影响另一个地方的内容(除非特别指示)。网格可以做到这一点，但是当我尝试使用网格来实现这一点时，它们似乎并没有真正允许您用您想要的任何内容填充网格单元格 - 如果内容太大，或者如果您想要它是粘性的，它会破坏布局的其余部分。
最佳答案
对于粘性顶栏
<div id="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
CSS
/* Style the navbar */
#navbar {
overflow: hidden;
background-color: #333;
}
/* Navbar links */
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px;
text-decoration: none;
}
/* Page content */
.content {
padding: 16px;
}
/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
position: fixed;
top: 0;
width: 100%;
}
/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
padding-top: 60px;
}
对于粘性垂直条，您可以使用它。
<div class="sidenav">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<!-- Page content -->
<div class="main">
...
</div>
CSS
/* The sidebar menu */
.sidenav {
height: 100%; /* Full-height: remove this if you want "auto" height */
width: 160px; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: #111; /* Black */
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
}
/* The navigation menu links */
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
color: #f1f1f1;
}
/* Style page content */
.main {
margin-left: 160px; /* Same as the width of the sidebar */
padding: 0px 10px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
关于javascript - HTML/CSS : What is the right way to make sticky menus?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52047222/