为什么底部滚动条的底部不见了？我认为它太深了。 而“无图像”框不是 100% 出现了吗？如何解决这个问题？
body {
padding: 0;
margin: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: whitesmoke;
overflow: hidden;
}
.container {
display: flex;
flex-direction: column;
}
.item {
height: 45px;
background-color: red;
overflow: hidden;
}
.main-content {
height: 100vh;
display: flex;
flex: 1;
background-color: whitesmoke;
overflow-y: scroll;
flex-wrap: wrap;
}
.gambar {
margin: 15px auto;
min-width: 200px;
max-height: 300px;
min-height: 300px;
border: 1px solid black;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="item">
Im header
</div>
<div class="main-content">
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
</div>
</div>
</body>
</html>情况是，我想使用 flexbox，但标题总是出现，所以我只需要在主要内容部分使用滚动系统 而且这个滚动条只出现在chrome中，当我用edge或者firefox打开的时候，没有了，滚动条没有了，为什么？
最佳答案
main-content 元素设置为视口(viewport)高度的 100%，但由于 item header 已经占据了部分高度，因此您最终会得到一个被推过视口(viewport)高度的溢出元素。您可以通过减去元素高度来解决此问题:
height: calc(100vh - 45px)
请检查以下代码段:
body {
padding: 0;
margin: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: whitesmoke;
overflow: hidden;
}
.container {
display: flex;
flex-direction: column;
}
.item {
height: 45px;
background-color: red;
overflow: hidden;
}
.main-content {
height: calc(100vh - 45px);
display: flex;
flex: 1;
background-color: whitesmoke;
overflow-y: scroll;
flex-wrap: wrap;
}
.gambar {
margin: 15px auto;
min-width: 200px;
max-height: 300px;
min-height: 300px;
border: 1px solid black;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="item">
Im header
</div>
<div class="main-content">
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
<div class="gambar"> No Image </div>
</div>
</div>
</body>
</html>关于html - 为什么我的滚动条在屏幕外？如何解决？ Flexbox，溢出-y : scroll，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48256039/