固定元素的位置而不将其从文档流中删除

Question

我的 HTML 代码中有三个元素。我想将元素固定在右侧，而不将其从文档流中删除。

<div class="container">
   <header class="main-header">
   </header>
   <main class="main-content">
   </main>
   <footer class="main-footer">
   </footer>
</div>

这是我正在使用的CSS代码

.container {
   display: grid;
   grid-template-columns: 1fr 3fr;
   grid-template-rows: auto auto;
}
.main-header{
   grid-column: 1/2;
   grid-row: 1/3;
   /* Here i want this to be fixed (scrolling should not have any effect)*/
   position: fixed;
  }

位置固定将其从文档流中删除，一切看起来都很丑陋。谁能告诉我如何在不使用position:fixed;的情况下实现这一目标？或者不将其从文档流中删除。

Answer 1

在 周围添加一个额外的环绕元素header，然后position:sticky应用于header。

我假设您的意思是固定到左侧而不是右侧，因为这似乎就是您的示例中的内容。

* {
  margin: 0;
}

.con {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto auto;
}

.wrap {
  background: gray
}

header {
  color: white;
  text-align: center;
  grid-area: 1 / 1 / 3 / 2;
  position: sticky;
  top: 0;
}

main {
  background: rgba(0, 0, 200, 0.4);
  height: 2000px;
  padding-top: 10px;
}

footer {
  text-align: center;
  background: black;
  color: white;
}

<div class="con">
  <div class="wrap">
    <header>
      <h2>Someone</h2>
      <p>Lorem ipsem</p>
      <p>lorem Ipsem</p>
      <p>lorem ipsem</p>
    </header>
  </div>
  <main>
    <h1>Heading</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae molestias maiores voluptates, suscipit eveniet vitae harum id? Fugiat labore eligendi delectus, ipsum molestiae numquam ex inventore deleniti deserunt quia perspiciatis!</p>
    <h2>heading 2</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis atque enim possimus error voluptas distinctio eos vel? Dolorem alias voluptas minus sunt asperiores consequuntur! Sit harum qui culpa ea assumenda!
    </p>
    <h2>heaing 2</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam ut reprehenderit vero perferendis aspernatur, rerum asperiores! Aperiam aliquam commodi quod dolores, unde optio repellat necessitatibus facere, laborum expedita enim soluta.
    </p>
  </main>
  <footer>
    <p>Made by Zullu</p>
  </footer>
</div>

Answer 2

只需保持标题固定，并为 .main-content 提供一个与标题高度一样大的 padding-top ，甚至为了美观而稍微高一点。

.main-header{
  grid-column: 1/2;
  grid-row: 1/3;
  /* Here i want this to be fixed (scrolling should not have any effect)*/
  position: fixed;
  top: 0;
  height: 80px;
}
.main-content {
  padding-top: 100px;
  width: 100%;
  float: left;
}