我试图使.bottom-nav的宽度与所有兄弟div相同，如.stick,.x和.zindex，但到目前为止没有任何工作，我有点困惑，请放心，因为我只编码了一个星期。
* {
box-sizing: border-box;
margin: 0 20px;
padding: 0 auto;
box-sizing: border-box;
}
.blah {
border: 5px dashed black;
background-color: greenyellow;
height: 200px;
align-items: center;
display: flex;
justify-content: center;
overflow: scroll;
margin-bottom: 40px;
}
.divdiv {
background-color: black;
width: 100px;
height: 300px;
margin-top: 40px;
}
.margin {
background-color: plum;
border: 5px dashed black;
text-align: center;
}
.x {
margin-top: 30px;
border: 5px dashed black;
background-color: lightseagreen;
height: 200px;
align-items: center;
display: flex;
justify-content: center;
overflow: hidden;
position: static;
}
.gra {
box-sizing: content-box;
background-color: black;
width: 100px;
height: 100px;
border-radius: 100px;
overflow: hidden;
margin: 0px 10px;
position: static;
}
.stick,
.zindex {
box-sizing: content-box;
border: 5px dashed black;
background-color: lightskyblue;
height: 2000px;
margin-top: 40px;
}
.gr,
.grow {
height: 200px;
margin: 30px;
}
.gr {
box-sizing: border-box;
background-color: black;
}
.grow {
box-sizing: border-box;
background-color: white;
border: 6px solid black;
position: sticky;
top: 0px;
opacity: 0.25;
border-radius: 30px;
}
.zindex {
height: 400px;
background-color: coral;
display: flex;
align-items: center;
justify-content: center;
}
.gr1,
.gr2,
.gr3 {
background-color: black;
height: 100px;
width: 100px;
box-shadow: 4px 4px grey;
}
.gr1 {
position: relative;
z-index: 3;
left: 50px;
bottom: 30px;
}
.gr2 {
background-color: crimson;
position: relative;
z-index: 2;
bottom: 20px;
}
.gr3 {
background-color: bisque;
position: relative;
z-index: 1;
right: 75px;
bottom: 10px;
}
.bottom-nav {
box-sizing: border-box;
background-color: white;
height: 30px;
border: 5px solid black;
bottom: 0px;
position: fixed;
z-index: 4;
text-align: center;
}
.float,
.empty {
border: 5px solid black;
margin-top: 30px;
height: 1000px;
background-color: lemonchiffon;
}
.left,
.right {
box-sizing: border-box;
height: 200px;
width: 200px;
background-color: black;
margin: 0 25px;
}
.left {
float: left;
}
.right {
float: right;
position: sticky;
top: 0px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practice</title>
</head>
<body>
<div class="blah">
<div class="divdiv"></div>
</div>
<p class="margin">H</p>
<div class="x">
<div class="gra"></div>
<div class="gra"></div>
<div class="gra"></div>
</div>
<div class="stick">
<div class="gr"></div>
<div class="grow"></div>
<div class="gr"></div>
</div>
<div class="zindex">
<div class="gr1"></div>
<div class="gr2"></div>
<div class="gr3"></div>
</div>
<div class="float">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="empty"></div>
<div class="bottom-nav">
</div>
</body>
</html尝试将宽度设置为100%，但它占用了html的整个宽度，将其设置为继承body的宽度，但没有成功
以下添加的内容似乎可以解决您的问题:
body, html {
margin: 0;
padding: 0;
}
.bottom-nav {
background-color: red;
width: calc(100% - 40px);
margin-right: auto;
}
为了更清晰，我改变了bottom-nav的颜色。
margin-right: auto负责将底部导航水平居中。width: calc(100% - 40px);计算导航的宽度。我们从全宽度减去40px，以考虑边距(每边20 px)。
* {
box-sizing: border-box;
margin: 0 20px;
padding: 0 auto;
box-sizing: border-box;
}
body, html {
margin: 0;
padding: 0;
}
.blah {
border: 5px dashed black;
background-color: greenyellow;
height: 200px;
align-items: center;
display: flex;
justify-content: center;
overflow: scroll;
margin-bottom: 40px;
}
.divdiv {
background-color: black;
width: 100px;
height: 300px;
margin-top: 40px;
}
.margin {
background-color: plum;
border: 5px dashed black;
text-align: center;
}
.x {
margin-top: 30px;
border: 5px dashed black;
background-color: lightseagreen;
height: 200px;
align-items: center;
display: flex;
justify-content: center;
overflow: hidden;
position: static;
}
.gra {
box-sizing: content-box;
background-color: black;
width: 100px;
height: 100px;
border-radius: 100px;
overflow: hidden;
margin: 0px 10px;
position: static;
}
.stick,
.zindex {
box-sizing: content-box;
border: 5px dashed black;
background-color: lightskyblue;
height: 2000px;
margin-top: 40px;
}
.gr,
.grow {
height: 200px;
margin: 30px;
}
.gr {
box-sizing: border-box;
background-color: black;
}
.grow {
box-sizing: border-box;
background-color: white;
border: 6px solid black;
position: sticky;
top: 0px;
opacity: 0.25;
border-radius: 30px;
}
.zindex {
height: 400px;
background-color: coral;
display: flex;
align-items: center;
justify-content: center;
}
.gr1,
.gr2,
.gr3 {
background-color: black;
height: 100px;
width: 100px;
box-shadow: 4px 4px grey;
}
.gr1 {
position: relative;
z-index: 3;
left: 50px;
bottom: 30px;
}
.gr2 {
background-color: crimson;
position: relative;
z-index: 2;
bottom: 20px;
}
.gr3 {
background-color: bisque;
position: relative;
z-index: 1;
right: 75px;
bottom: 10px;
}
.bottom-nav {
background-color: red;
height: 30px;
border: 5px solid black;
bottom: 0px;
position: fixed;
width: calc(100% - 40px);
margin-right: auto;
z-index: 4;
text-align: center;
}
.float,
.empty {
border: 5px solid black;
margin-top: 30px;
height: 1000px;
background-color: lemonchiffon;
}
.left,
.right {
box-sizing: border-box;
height: 200px;
width: 200px;
background-color: black;
margin: 0 25px;
}
.left {
float: left;
}
.right {
float: right;
position: sticky;
top: 0px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practice</title>
</head>
<body>
<div class="blah">
<div class="divdiv"></div>
</div>
<p class="margin">H</p>
<div class="x">
<div class="gra"></div>
<div class="gra"></div>
<div class="gra"></div>
</div>
<div class="stick">
<div class="gr"></div>
<div class="grow"></div>
<div class="gr"></div>
</div>
<div class="zindex">
<div class="gr1"></div>
<div class="gr2"></div>
<div class="gr3"></div>
</div>
<div class="float">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="empty"></div>
<div class="bottom-nav">
</div>
</body>
</html