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

Question

我正在研究 bootstrap-vue。我需要构建一个组件，它有 50% 的 background-color 和其余的空白（垂直）。该组件应在导航栏之后占据屏幕的 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>

我还尝试了不同的类或 bootstrap 来添加 50% 的背景。但是没用。

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

感谢帮助

Answer 1

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

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

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

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

How to create a component which have 50% of the background color in Vue

css

background-color

bootstrap-vue