最小高度:100vh不适合我的项目

Question

我没有做任何新的事情，没有我以前没有做过的事情，但我有这个问题。我希望有人能解释为什么我在这一点上甚至有一个滚动条，为什么不是min-height: 100vh;工作吗?我的意思是，我已经尝试了4种不同的方法来解决溢出问题，它仍然存在于代码中。

.title {
font-family: "Laterlocks DEMO";
display: inline-flex;
font-size: 133px;
background: -webkit-linear-gradient(45deg, #bf787c, #96a1a3 70%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
:root {
--bg-grey: #e9e9e9;
/*#96A1A3;
#bf787c; 
#ddacb2;
*/
}
body {
background-color: var(--bg-grey);
}
html,
body {
height: 100%;
}
img {
display: block;
width: 100%;
}
img.bookcover {
height: 700px;
width: 494px;
}
.hero {
min-height: 100vh;
}
.herogrid-container {
max-width: 1250px;
width: 95%;
margin: 0 auto;
display: flex;
flex-direction: row;
margin-top: 180px;
gap: 50px;
}

<main class="hero">
<div class="herogrid-container">
<div class="heroinner left">
<img src="https://i.imgur.com/36IzNn5.jpg" alt="MPD Psycho Book Cover" class="bookcover">
</div>
<div class="heroinner right">
<p class="title">MPD PSCYHO</p>
</div>
</div>
</main>

What I tried

min-height: 100vh;
height: 100%;
min-height: 100%;
height: auto !important;
height: 100%;

我codepen

Answer 1

body元素有一个默认的margin: 8px。

herogrid-container元素有一个margin-top: 180px。

试着处理这些。设置为0有帮助。

.img-bookcover上的width: 494px也生成垂直滚动条。不知道该如何处理，但删除该规则可以解决问题。

Answer 2

我不明白你的方法为什么行不通。但这是一个有效的方法来得到你想要的。

.title {
font-family: "Laterlocks DEMO";
display: inline-flex;
font-size: 133px;
background: -webkit-linear-gradient(45deg, #bf787c, #96a1a3 70%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
:root {
--bg-grey: #e9e9e9;
/*#96A1A3;
#bf787c; 
#ddacb2;
*/
}
body {
background-color: var(--bg-grey);
}
img.bookcover {
display: block;
height: 700px;
width: 494px;
}
.hero {
position: absolute;
bottom: 0px;
left: 10vw;
}
.herogrid-container {
max-width: 1250px;
width: 95%;
margin: 0 auto;
display: flex;
flex-direction: row;
gap: 50px;
}

<main class="hero">
<div class="herogrid-container">
<div class="heroinner left">
<img src="https://i.imgur.com/36IzNn5.jpg" alt="MPD Psycho Book Cover" class="bookcover">
</div>
<div class="heroinner right">
<p class="title">MPD PSCYHO</p>
</div>
</div>
</main>

Answer 3

找一个reset.css文件。浏览器自带默认样式，reset.css文件会帮你去掉这些样式。我替换了index.css，这样我就可以从头开始设计了。