css 删除边距和填充不起作用的空间

efzxgjgh  于 2023-03-05  发布在  其他
关注(0)|答案(2)|浏览(114)

如何删除this codepen底部和页脚div之间的空格。我已经尝试了this SO post上的建议,但似乎不起作用。谢谢。

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: grey;
  bottom: 0;
  margin: 0;
}

.container {
  height: 2000px;
  background-color: white;
}

.footer {
   position: relative;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: green;
   color: white;
   text-align: center;
  margin: 0;
}
<div class="container">
  <div class="row">
    <div class="col-12">
    <h2>Lorem ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
</div>

<div class="footer">
  <p>Footer</p>
</div>
vhmi4jdf

vhmi4jdf1#

您将.container div的高度设置为2000px,因为div中没有足够的内容来填充该空间,所以看起来容器和页脚之间有一个空白。
如果您从“.container”css中删除height: 2000px;,它将删除多余的空间。

6mzjoqzu

6mzjoqzu2#

将容器高度从2000px更改为100%(或者完全删除)。一般来说,如果你想按比例组合或填充空间,避免使用静态单位(如像素),而使用动态单位(如%vwvh)。你可以阅读更多关于它们的信息here

相关问题