我正在练习html & css，刚开始，我已经卡住了。 我有一个粘性的，似乎占用所有可能的宽度并阻止其他元素正确定位。我试过两种方法：
此外，我还有另一个关于 aside 的小问题：我希望它在用户尚未滚动页面时缩小（否则有些行直到 “aside position changes to 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>您必须将 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;
}