Sticky div 占满所有宽度

Question

我正在练习 html & css，刚开始，我已经卡住了。我有一个棘手的问题是似乎占用所有可能的宽度并阻止其他元素正确定位。我试过两种方法：

将搁置位置设置为固定。它实际上解决了问题但是..但它不粘。
使内容（主要）向右浮动。内容在我想要的位置，但由于某种原因，旁边（和导航栏）的粘滞位置停止工作。

此外，我还有另一个小问题：我希望它在用户尚未滚动页面时缩小（否则某些行直到 才可见） aside 位置变为 sticky)。尝试了 flexbox 属性，但没有成功。

页面还没有响应。这里的代码：

    body {
      background-image: url(html-images/random1/backgroundmain.jpg);
      background-repeat: no-repeat;
      background-size: cover;
      margin:0;
    }
    #headermain {
      background-color:rgba(128,128,128,0.4);
      height:150px;
      padding-top:5px;
      padding-left:5px;
    }
    #logoheadermain {
      float:left;
      padding-right:5px;
    }
    #titleheadermain {
      color:black;
      text-align:center;
      font-family:monospace;
      padding-top:20px;
      padding-right:10px;
    }
    @media only screen and (max-width:800px) {
      #titleheadermain {
        padding-top:0.1px
      }
    }
    #titleheadermain h1 {
      font-size:30px;
    }
    #titleheadermain h2 {
      font-size:22px;
    }
    @media only screen and (max-width:650px) {
      #titleheadermain h1 {
        font-size:26px;
      }
      #titleheadermain h2 {
        font-size:20px;
      }
    }
    #navbarmain {
      position:sticky;
      top:0;
      color:white;
      width:100%;
      font-family:monospace;
      font-size:20px;
      z-index:1;
    }
    #navbarmain ul {
      list-style:none;
      flex-direction:row;
      width:100%;
      margin:0;
      padding:0;
      display:flex;
    }
    #navbarmain li {
      background-color:black;
      width:16.66%;
      display:inline-block;
      text-align:center;
      padding-top:12px;
      height:46px;
      box-sizing:border-box;
      margin:0px;
      box-shadow:4px 4px 3px gray;
    }
    #navbarmain li:hover {
      background-color:rgb(77, 77, 77);
      cursor:pointer;
    }
    #asidemain {
      width:16.6%;
      text-align:center;
      font-family:monospace;
      font-size:18px;
      position:sticky;
      top:46px;
      overflow-y:scroll;
      height:565px;
      background-color:white;
      display:inline-block;
    }
    #asidemain ul {
      list-style:none;
      padding-left:0px;
      display:flex;
      flex-direction:column;
      margin:0;
    }
    #asidemain li {
      padding-top:20px;
      padding-bottom:20px;
    }
    #asidemain li:nth-child(odd) {
      background-color:rgb(204, 204, 204);
    }
    #asidemain li:hover:nth-child(even) {
      background-color:rgb(204, 204, 204);
      cursor:pointer;
    }
    #asidemain li:hover:nth-child(odd) {
      background-color:white;
      cursor:pointer;
    }
    #mainmain {
      height:100%;
      width:75%;
      padding-left:20%;
      padding-top:20px;
      padding-right:40px;
    }
    #section1 {
      font-family:Tahoma;
      text-align:center;
      margin:0;
      display:inline-block;
    }
    #article1a {
      text-align:center;
      width:50%;
      display:inline-block;
      float:left;
    }
    #article1a p {
      font-size:18px;
      text-shadow:1px 1px darkgray;
    }
    #article1b img {
      display:inline-block;
      width:250px;
      height:450px;
      margin-top:120px;
      float:right;
      box-shadow:5px 5px 5px gray;
    }

<body>
  <header id="headermain">
    <div id="logoheadermain">
      <svg style="height:145px; width:250px;">
        <polygon points="10,10 10,135 235,135 235,10" style="stroke:black;
        stroke-width:6px; fill:transparent;" />
        <text fill="black" font-size="95px" font-family="monospace" x="17"
        y="103"> LrIs </text>
      </svg>
    </div>
    <div id="titleheadermain">
      <h1> Lorem Ipsum </h1>
      <h2> Dolor sit amet, consectetur adipisci elit </h2>
    </div>
  </header>
  <nav id="navbarmain">
    <ul>
      <li> Sed do </li>
      <li> Eiusmod </li>
      <li> Tempor </li>
      <li> Incidunt </li>
      <li> Ut labore </li>
      <li> Et dolore </li>
    </ul>
  </nav>
  <aside id="asidemain">
    <ul>
      <li> 0000000 </li>
      <li> 1111111 </li>
      <li> 2222222 </li>
      <li> 3333333 </li>
      <li> 4444444 </li>
      <li> 5555555 </li>
      <li> 6666666 </li>
      <li> 7777777 </li>
      <li> 8888888 </li>
      <li> 9999999 </li>
    </ul>
  </aside>
  <main id="mainmain">
    <section id="section1">
      <h3> Sed do </h3>
      <article id="article1a">
        <p> Sed ut perspiciatis unde omnis iste natus error sit voluptatem
          accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae
          ab illo inventore veritatis et quasi architecto beatae vitae dicta
          sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit,
          aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
          eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam
          est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci
          velit, sed quia non numquam eius modi tempora incidunt, ut labore et
          dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam,
          quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi
          ut aliquid ex ea commodi consequatur? Quis autem vel eum iure
          reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae
          consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla
          pariatur? At vero eos et accusamus et iusto odio dignissimos
          ducimus, qui blanditiis praesentium voluptatum deleniti atque
          corrupti, quos dolores et quas molestias excepturi sint, obcaecati
          cupiditate non provident, similique sunt in culpa, qui officia
          deserunt mollitia animi, id est laborum et dolorum fuga. Et harum
          quidem rerum facilis est et expedita distinctio. Nam libero tempore,
          cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus
          id, quod maxime placeat, facere possimus, omnis voluptas assumenda
          est, omnis dolor repellendus. Temporibus autem quibusdam et aut
          officiis debitis aut rerum necessitatibus saepe eveniet, ut et
          voluptates repudiandae sint et molestiae non recusandae. Itaque
          earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
          voluptatibus maiores alias consequatur aut perferendis doloribus
          asperiores repellat.</p>
      </article>
      <article id="article1b">
        <img src="html-images/random1/article1b.jpg" alt="A random image" />
      </article>
    </section>
  </main>
</body>
</html>

Answer 1

您必须将 Aside 和 Main 标签都设置为 Height 作为您需要的最大范围。例如，假设我要将 Aside 的高度设置为 100vh（这里的 Vh 表示视口高度），它会占用你的浏览器高度的全视图屏幕。与 main 的 follow 相同。 Position Sticky 将根据需要为您工作。

尝试如下更改您的CSS

#asidemain {
width: 25%;
height: 100vh;
min-height: 500px;
overflow: auto;
position: -webkit-sticky;
position: sticky;
top: 5%;

}

#mainmain {
width: 60%;
height: 200vh;
min-height: 1000px;

}

Sticky div 占满所有宽度

Sticky div taking all the width

html

css

css-position

css-float