【发布时间】：2020-06-21 18:38:21
【问题描述】：
我正在练习 html 和 css，刚刚开始，我已经卡住了。 我得到了一个提示， 似乎 占据了所有可能的宽度并阻止其他元素的定位。我尝试了两种方法：
- 将侧面位置设置为固定。它实际上解决了问题，但是......但它不粘。
- 使内容（主要）向右浮动。内容是我想要的位置，但侧面（和导航栏）的粘性位置由于某种原因停止工作。
另外，我还有另一个小问题：当用户还没有滚动页面时，我希望它按比例缩小（否则在 之前有些行不可见粘”）。尝试了 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>【问题讨论】：
-
让一边浮动，所以 main 可以放在一边。 （你应该深入研究 grid 和 flex ）
标签： html css css-float css-position