为什么当我滚动超过100%的高度时,笔触位置不起作用(标题)?
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
html,
body {
height: 100%;
width: 100%;
}
/* -------------------- Headers -------------------- */
.social-menu {
display: none;
}
header {
top: 0;
position: -webkit-sticky;
position: sticky;
display: flex;
justify-content: center;
}
header nav {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
max-width: 1100px;
width: 100%;
}
#nav-check {
display: none;
}
#nav-check:checked~ul {
display: grid;
}
header nav ul {
display: none;
}
/* -------------------- Hero -------------------- */
.hero {
height: auto;
}
/* -------------------- Noticias -------------------- */
/* -------------------- Patrocinadores -------------------- */
@media (min-width: 600px) {
/* -------------------- Headers -------------------- */
header nav label {
display: none;
}
#nav-check:checked~ul {
display: flex;
}
.social-menu-father {
display: flex;
justify-content: center;
}
.social-menu {
display: grid;
grid-template-columns: 1fr 1fr;
height: 46px;
align-items: center;
padding: 0 40px;
max-width: 1100px;
width: 100%;
}
.social-menu div {
display: flex;
justify-content: flex-end;
}
header nav {
height: 80px;
}
header nav ul {
display: flex;
justify-content: space-between;
}
/* -------------------- Hero -------------------- */
.hero {
height: calc(100% - 126px);
}
/* -------------------- Noticias -------------------- */
/* -------------------- Patrocinadores -------------------- */
}
<div class="social-menu-father">
<div class="social-menu">
<a href="">Twitch online</a>
<div>
<a href="">a</a>
<a href="">a</a>
<a href="">a</a>
<a href="">a</a>
</div>
</div>
</div>
<header>
<nav>
<a href=""><img src="https://i.pinimg.com/originals/08/b5/07/08b5070ece24d17eea517ba0e2b188b4.png" width="50px"></a>
<input type="checkbox" id="nav-check">
<label for="nav-check">asd</label>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Noticias</a></li>
<li><a href="">Equipos</a></li>
<li><a href="">Patrocinadores</a></li>
<li><a href="">Club</a></li>
</ul>
</nav>
</header>
<div class="hero">
asd
</div>
<div>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
</div>
body
需要改为min-height
。还要用英雄的标题height: calc(100% - 126px)
替换height: calc(100vh - 126px)
,因为百分比将不再起作用。
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
html {
height: 100%;
}
body {
min-height: 100%;
}
.social-menu {
display: none;
}
header {
top: 0;
position: sticky;
display: flex;
justify-content: center;
}
header nav {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
max-width: 1100px;
}
#nav-check {
display: none;
}
#nav-check:checked~ul {
display: grid;
}
header nav ul {
display: none;
}
@media (min-width: 600px) {
header nav label {
display: none;
}
#nav-check:checked~ul {
display: flex;
}
.social-menu-father {
display: flex;
justify-content: center;
}
.social-menu {
display: grid;
grid-template-columns: 1fr 1fr;
height: 46px;
align-items: center;
padding: 0 40px;
max-width: 1100px;
width: 100%;
}
.social-menu div {
display: flex;
justify-content: flex-end;
}
header nav {
height: 80px;
}
header nav ul {
display: flex;
justify-content: space-between;
}
.hero {
height: calc(100vh - 126px);
}
}
<div class="social-menu-father">
<div class="social-menu">
<a href="">Twitch online</a>
<div>
<a href="">a</a>
<a href="">a</a>
<a href="">a</a>
<a href="">a</a>
</div>
</div>
</div>
<header>
<nav>
<a href=""><img src="https://i.pinimg.com/originals/08/b5/07/08b5070ece24d17eea517ba0e2b188b4.png" width="50px"></a>
<input type="checkbox" id="nav-check">
<label for="nav-check">asd</label>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Noticias</a></li>
<li><a href="">Equipos</a></li>
<li><a href="">Patrocinadores</a></li>
<li><a href="">Club</a></li>
</ul>
</nav>
</header>
<div class="hero">
asd
</div>
<div>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
</div>
将机身高度设置为100%会将粘贴区域限制为仅屏幕高度的100%,并且您也将溢出。添加一些边框以更好地注意这一点:
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
html {
height: 100%;
}
body {
height: 100%;
border:2px solid;
}
.social-menu {
display: none;
}
header {
top: 0;
position: sticky;
display: flex;
justify-content: center;
}
header nav {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
max-width: 1100px;
}
#nav-check {
display: none;
}
#nav-check:checked~ul {
display: grid;
}
header nav ul {
display: none;
}
@media (min-width: 600px) {
header nav label {
display: none;
}
#nav-check:checked~ul {
display: flex;
}
.social-menu-father {
display: flex;
justify-content: center;
}
.social-menu {
display: grid;
grid-template-columns: 1fr 1fr;
height: 46px;
align-items: center;
padding: 0 40px;
max-width: 1100px;
width: 100%;
}
.social-menu div {
display: flex;
justify-content: flex-end;
}
header nav {
height: 80px;
}
header nav ul {
display: flex;
justify-content: space-between;
}
.hero {
height: calc(100vh - 126px);
}
}
<div class="social-menu-father">
<div class="social-menu">
<a href="">Twitch online</a>
<div>
<a href="">a</a>
<a href="">a</a>
<a href="">a</a>
<a href="">a</a>
</div>
</div>
</div>
<header>
<nav>
<a href=""><img src="https://i.pinimg.com/originals/08/b5/07/08b5070ece24d17eea517ba0e2b188b4.png" width="50px"></a>
<input type="checkbox" id="nav-check">
<label for="nav-check">asd</label>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Noticias</a></li>
<li><a href="">Equipos</a></li>
<li><a href="">Patrocinadores</a></li>
<li><a href="">Club</a></li>
</ul>
</nav>
</header>
<div class="hero">
asd
</div>
<div>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
</div>