我正在练习html和css，刚刚开始，我已经卡住了。 我得到了一个粘性，它似乎占用了所有可能的宽度并阻止了其他元素的定位。我尝试了两种方法：
- 将留置位置设置为固定。它实际上解决了问题，但是..但它并不粘。
- 使内容(主要(向右浮动。内容是我想要的位置，但是由于某种原因，旁边(和导航栏(的粘性位置停止工作。
另外，我在旁白方面还有另一个小问题：我希望它在用户尚未滚动页面时缩小(否则某些行在"旁白位置变为粘性">之前不可见(。尝试了弹性框属性，但没有运气。
页面尚未响应。这里的代码：
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>您必须将"旁边"和"主要"标签都设置为"高度"作为所需的"最大范围"。例如，假设我要将 Aside 的高度设置为 100vh(此处 Vh 表示视口高度(，它将全面查看浏览器高度的屏幕。与主要也相同。位置粘性将根据需要为您工作。
尝试更改您的 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;
}