三列：Vuetify 中的一列是固定的，两列是反应性的

Question

我需要布局中最右边的列恰好为 600 像素（这在我的应用程序中是一个特殊的 canvas 东西）。我希望其他两列拆分为剩余的 space，如 70-30 左右。我已经使用 Vuetify 网格布局来尝试实现这一点，但我认为网格布局不是我想要的。

CodePen

 <v-row class="fill-height d-flex">
    <v-col class="black hidden-md-and-down col-2 overflow-auto docs flex-column pl-1 py-1 pr-0" style="max-height: calc(100vh - 80px);" >
      <div class="primary" style="background-color: green">
        Side bar
      </div>
    </v-col>
    <v-col style="background-color: blue" class="col-6 col-auto py-1 pa-1 pb-0 ma-0 flex-grow-1" style="max-height: 100%" >
      <div>
        Main Content
      </div>
    </v-col>
    <v-col class="fill-height col-lg-6 py-1 d-flex flex-column pr-0 pl-0" style="max-width: 600px" >
        <div style="background-color: purple">
        Top Right
      </div>
       <div>
        Mid Right
      </div>
        <div>
        Bot Right
      </div>
    </v-col>
  </v-row>

谢谢！

Answer 1

使用 CSS Flexbox 的简单方法：

body {margin: 0}

.container {
  height: 100vh;
  display: flex; /* In vuetify you have class that's sets it: "d-flex" */
}

.left {
  width: 30%;
  background-color: red;
}

.middle {
  width: 70%;
  background-color: green;
}

.right {
  width: 600px;
  background-color: blue;
}

<div class="container">
  <div class="left">Left</div>
  <div class="middle">Middle</div>
  <div class="right">Right</div>
</div>

三列：Vuetify 中的一列是固定的，两列是反应性的

Three columns: one fixed, two reactive in Vuetify

css

flexbox

css-grid

vue.js

vuetify.js