Question

我正在尝试制作一个包含标题和水平菜单的页面。在其下方的左侧应该是一个粘性的垂直菜单。页面的其余部分应该是内容。要在图片中提供它：

为实现这一点，我尝试使用网格，然后使用固定或绝对或相对位置的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";
       }
   }
}

但是现在我遇到了一个问题，即手风琴的按钮应该跨越屏幕的剩余宽度。但是，它似乎仅跨越按钮文本的宽度。如果我在CSS中将包含元素（内容类）的宽度设置为100％，则这超出了窗口的宽度。我假设这样做是因为我固定了横幅和导航栏的位置，然后将内容放置在应该显示的位置，并用绝对位置偏移了它。但是，这只会改变它而不是“填充剩余空间”。因此，如果我将宽度设置为100％，则将占用屏幕宽度的100％，因此在屏幕之外会留下大块偏移。

由于我遇到了很多这样的问题，每次修复一个问题时，我最终都会遇到另一个问题，这使我怀疑自己正在将这一切都弄错了。有没有更好的方法来制作粘性和非粘性组件，使它们仍然充满空间而不会溢出呢？感觉一个人应该能够将屏幕上专门用于某些任务的部分切开，在这些部分的内部，只需填充自己的HTML页面，这样一处的内容就不会影响另一处的内容（除非明确指示）。网格可以做到这一点，但是当我尝试使用网格进行工作时，它们似乎并没有真正允许您用所需的任何东西填充网格单元-如果内容太大，或者您想要它很粘，会破坏其余的布局。

Answer 1

用于粘贴顶部栏

      <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;}
    }

HTML / CSS：制作粘性菜单的正确方法是什么？

1 个答案: