底部的粘性位置：0不起作用
这是简单的HTML CSS脚本，只是设计一个页面，我想将底部类放在容器类的底部。我试图给容器类提供高度，但仍然粘性属性不起作用。
@import url('https://fonts.googleapis.com/css2?family=Ubuntu&family=Varela+Round&display=swap');
body {
background-color: antiquewhite;
}
* {
margin: 0;
padding: 0;
}
nav {
font-family: 'Ubuntu', sans-serif;
}
nav ul {
display: flex;
list-style-type: none;
height: 65px;
background-color: black;
color: white;
align-items: center;
}
.brand img {
width: 44px;
padding: 0 8px;
}
.brand {
display: flex;
align-items: center;
font-weight: bold;
font-size: 1.3rem;
}
nav li {
padding: 0 12px;
}
.container {
min-height: 100vh;
border: 5px solid red;
position: relative;
}
.bottom {
border: 2px solid green;
position: sticky;
height: 130px;
background-color: black;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
#myProgressBar {
width: 80vw;
}<!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>Spotify</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<li class="brand"><img src="logo.png" alt="Spotify"><span>Spotify</span></li>
<li>Home </li>
<li>about</li>
<li> </li>
</ul>
</nav>
<div class="container">
<h1>Best of NCS - No Copyright Sounds</h1>
<div class="songList"></div>
<div class="songBanner"></div>
<div class="bottom">
<input type="range" name="range" id="myProgressBar" min="0" max="100">
<div class="icons">
<!--fontawesome Icons-->
<i class="fa-solid fa-play"></i>
</div>
</div>
</div>
<script src="script.js"></script>
<script src="https://kit.fontawesome.com/f6f6daec14.js" crossorigin="anonymous"></script>
</body>
</html>This is simple HTML CSS script , just designing one page , i want to put bottom class at the bottom of container class. I tried giving height to container class but still sticky property not working.
@import url('https://fonts.googleapis.com/css2?family=Ubuntu&family=Varela+Round&display=swap');
body {
background-color: antiquewhite;
}
* {
margin: 0;
padding: 0;
}
nav {
font-family: 'Ubuntu', sans-serif;
}
nav ul {
display: flex;
list-style-type: none;
height: 65px;
background-color: black;
color: white;
align-items: center;
}
.brand img {
width: 44px;
padding: 0 8px;
}
.brand {
display: flex;
align-items: center;
font-weight: bold;
font-size: 1.3rem;
}
nav li {
padding: 0 12px;
}
.container {
min-height: 100vh;
border: 5px solid red;
position: relative;
}
.bottom {
border: 2px solid green;
position: sticky;
height: 130px;
background-color: black;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
#myProgressBar {
width: 80vw;
}<!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>Spotify</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<li class="brand"><img src="logo.png" alt="Spotify"><span>Spotify</span></li>
<li>Home </li>
<li>about</li>
<li> </li>
</ul>
</nav>
<div class="container">
<h1>Best of NCS - No Copyright Sounds</h1>
<div class="songList"></div>
<div class="songBanner"></div>
<div class="bottom">
<input type="range" name="range" id="myProgressBar" min="0" max="100">
<div class="icons">
<!--fontawesome Icons-->
<i class="fa-solid fa-play"></i>
</div>
</div>
</div>
<script src="script.js"></script>
<script src="https://kit.fontawesome.com/f6f6daec14.js" crossorigin="anonymous"></script>
</body>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
位置：粘性不执行您认为做的事情。向下滚动时，它将使元素粘在标头上。您可以使用flexbox或网格将元素粘在底部。
例如，在此处查看：
flexbox： https://dev.to/nehalahmadkhan/how-to-make-foot-foot-------------------------------------page-3i14
grid：在底部使用CSS网格的页脚？无法弄清楚吗？
只是要知道，在某些旧手机上，
100VH可能是一个问题 - 由于未计算的额外标头间距。位置粘性如果您必须支持IE11，则不起作用。The
position: stickydoes not do what you think it does. It will make the element stick to the header when you scroll down.You can use either flexbox or grid to make the element stick to the bottom.
For example, have a look here:
flexbox: https://dev.to/nehalahmadkhan/how-to-make-footer-stick-to-bottom-of-web-page-3i14
grid: Footer at bottom with css grid? Can't figure it out?
Just be aware, that on some older phones the
100vhmay be an issue - due to the extra header-spacing that is not calculated.position stickydoes not work on IE11, if you have to support that.