页脚与内容无关（Vuejs）

Question

基本上我创建了一个组件，它只有一个标题和一个应该覆盖整个页面的背景颜色（但它不是，显然有一个上边距，我不知道如何删除它）而且我创建一个组件作为页脚。这个组件应该留在页面的底部，它应该随着内容的添加而下降，但它没有，内容与它重叠甚至交叉。我该如何解决？

背景CSS:

<style scoped>
*{
    margin: 0%;
    padding: 0%;
}
.background{
    position: relative;
    height: 88vh;
    background-color: #3B3B3B;
}
.title{
    border: 1px solid #707070;
    border-left: none;
    border-right: none;
    
}
.title h2{
    text-align: left;
    color: #B16DFF;
    padding-top: 0.8em;
    font-size: 2em;
    padding-bottom: 0.5em;
    margin-left: 1.5em;
    font-weight: 600;
}

页脚 CSS:

<style scoped>
.container{
  width: 100%;
  margin: 0%;
  position: absolute;
  bottom: 0%;
  background-color: #232323;
}

.container h2{
  font-weight: bold;
  color: #B16DFF;
  font-size: 1.5rem;
  padding-top: 1.1em;
}

.container #text{
  position: relative;
  float: left;
  padding-left: 5em;
  text-align: justify;
  padding-bottom: 2em;
}

.container p{
  font-weight: 600;
  font-size: 0.8rem;
  color: white;
}

.container #title{
  padding-bottom: 0.4em;
}

.container #description{
  padding-bottom: 1.3rem;
}

.container #images{
  position: relative;
  padding-top: 3em;
  float: left;
  padding-left: 5em;
}

.container ul li{
  display: inline-block;
  padding-left: 2em;
}

Answer 1

在你的背景 css 上，你有一个 scoped 风格，所以它并不适用于所有东西。此外，当您使用 0 作为 css 属性的值时，您不需要指定单位。

页脚与内容无关（Vuejs）

Footer is not going doing with content (Vuejs)

html

css

vue.js

background

footer