我似乎遇到了 div 对下方的未知空间。 我使用了 bootstrap 网格概念并利用行和列来拥有 2 个相邻的 Div。 然后我使用 CSS 使 div 填满屏幕的整个空间，但我似乎无法解释 div 下面的空白区域。
我已经尝试过包括高级 CSS 重置。
这是 html :
#half_box_1 {
width: 50%;
height: 100vh;
background-color: #FFAEAB;
}
#half_box_2 {
width: 50%;
height: 100vh;
background-color: #FFC0FA;
}
#following_div {
height: 500px;
width: 100%;
background-color: red;
}<!DOCTYPE html>
<html>
<head>
<title>Kshitij Dhyani</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="materialize.css">
<link rel="stylesheet" type="text/css" href="my_portfolio.css">
<!-- FONTS -->
</head>
<body>
<div class="row">
<div class="col-lg-6" id="half_box_1">asd</div>
<div class="col-lg-6"
id="half_box_2"></div>
</div>
<div id="following_div"></div>
</body>
</html>我无法理解这个下落不明的空间。
最佳答案
由于您可能已经注意到(通过评论)，您的代码似乎工作正常。
您的问题似乎出在 CSS 的其他地方。
首先，尝试使用以下 CSS 看看它是否有效:
* {
padding: 0 !important;
margin: 0 !important;
}
如果可行，您可以将其删除，然后您需要开始调试。
打开 Chrome DevTools 并转到 Sources -> Page 并找到您的 CSS 文件。尝试一个接一个地删除每个 CSS block 。如果之间没有更多的空间，您可能会找出问题所在。
关于html - div 下方的未知空间？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57449828/