如何在Vue中创建具有50％背景色的组件

Question

我正在研究Bootstrap-Vue。我需要构建一个包含background-color的50％的组件，并保持空白（垂直）。该组件应占据导航栏之后屏幕的100％，并且应具有50％。此组件将具有不同的子组件。

类似这样的东西，但是它们之间是一条直线。 （就像红线一样）

我尝试手动添加高度和背景色。它是如何工作的。但是，我希望在bootstrap-vue中做到这一点。

这是基本代码： CardGrouper.vue：

<template lang="html">

  <div class="h-100" >
    <h1>card-grouper Component</h1>
    <div class="h-50" style=" background-color: #C8544F">
      Height 50%
    </div>
  </div>

</template>

<script lang="js">
  export default  {
    name: 'CardGrouper',
    props: [],
    mounted() {

    },
    data() {
      return {

      }
    },
    methods: {

    },
    computed: {

    }
}
</script>

<style scoped >

</style>

我还尝试了不同种类的引导程序以添加50％的背景。但这没用。

如何使用Bootstrap-vue和vue做到这一点。 具体来说，我正在寻找一个纯自举解决方案。因为我正在开发响应式应用程序。

感谢您的帮助

Answer 1

您可以使用线性渐变来做到这一点：

.full{
width: 100vw;
height: 100vh;
background: linear-gradient(to bottom, blue 50%, yellow 50%);
}

<div class="full"></div>