Question

我通过类绑定为body元素赋予了红色的背景色，并且在样式上将其设置为白色。我唯一想做的就是用Vue控制背景颜色，但是背景颜色不是全高。

export default {
    data(){
        return{
             text : 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse voluptatibus dolores rerum excepturi corporis nisi odit minus earum adipisci non laboriosam deserunt autem architecto molestias, explicabo provident laborum omnis accusantium!',
        
             author:'',
             backgroundcolor:'#16a085',
        }
    
    
    },

html, 
body {
    margin: 0;
    padding: 0;
    background-color:white;
}

.background{
    background-color: red
}

#wrapper{
   
    width: 650px ;
    min-height: auto;   
    background-color: rgb(198, 241, 200);
    margin: 0 auto;
    margin-top: 200px;
    border-radius: 10px;
}
.btn{
    position: relative;
    
    left:6px;
    margin: 10px;
    
}
#text{
    
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow: hidden;
    padding: 10px;
    margin:30px;
    padding-top: 20px;
}
#icon{
    font-size:35px;
    margin:5px;
    padding-top:20px;
}
#twitter{
    background-color: rgb( 0, 172, 237)
}
#author{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    position: relative;
    left :400px;
    font-weight: bold;
    font-size: 20px;
}

<html>
   
 <body :class="{ background: backgroundcolor }"> 
<div id='wrapper'>  
      <p id="text"><i id='icon' class="fas fa-quote-left"> {{text}}</i></p>
       <span id='author'>- {{author}}</span>
       <button id='twitter' class="btn"><i class='fab fa-twitter'></i></button>
       <button  v-on:click="changeWidth()" @click="start " class="btn btn-success">New Quote</button>
   </div>
 </body>
</html>

Answer 1

好吧，如果您希望背景颜色为红色，则只需以这种方式简单地添加类，即可

<body class="background"> 
.background {
    background-color: red;
    height: 100%;
    width: 100%;
    }

这是我从您尝试提出的问题中了解的内容？如果您可以更具体地解释您的要求，那么我想我可以为您提供更多帮助？或者改为将添加内容添加到 'html，body {}' 样式，而不是单独的类。

Answer 2

您正在下拉身体，因为您在包装纸上设置了页边距。要解决此问题，只需将其包装在另一个需要填充的div中。还可以使您的身体100％。看看下面的小提琴：

body: {height: 100%}

https://codepen.io/nielsvhb/pen/oQLZVQ

具有两种背景颜色的主体元素

2 个答案: