如何使我的Vuetify布局利用所有可用的垂直空间?

huangapple go评论53阅读模式
英文:

How can I make my Vuetify layout use all the available vertical space?

问题

I inherited a project where I need the layout to use as much viewport space as possible both horizontally and vertically, and resize nicely too.

My layout is pretty simple, with 2 main rows split in two columns. I need to make it so the two main "cells" (marked "Main 1" and "Main 2" in the code below) expand vertically to use as much vertical space as possible.

My understanding is this can be achieved using a <v-container fluid fill-height>. But while the horizontal part works perfectly well, I can't get this layout to expand vertically.

Here is my App.vue file (simplified for the purpose of this post):

<template>
    <v-app>
        <v-main>
            <v-container fluid fill-height>
                <v-row>
                    <v-col cols="6" class="yellow">Header 1</v-col>
                    <v-col cols="6" class="yellow">Header 2</v-col>
                </v-row>
                <v-row>
                    <v-col cols="8" class="pink">
                        <v-row>
                            <v-col cols="5" class="red">Main 1</v-col>
                            <v-col cols="7" class="red">Main 2</v-col>
                        </v-row>
                        <v-row>
                            <v-col cols="12" class="red">Bottom</v-col>
                        </v-row>
                    </v-col>
                    <v-col cols="4" class="pink">Right</v-col>
                </v-row>
            </v-container>
        </v-main>
    </v-app>
</template>

<style scoped>
  .yellow {  border: 1px dotted yellow  }
  .red {  border: 1px dotted red  }
  .pink {  border: 1px dotted pink  }
</style>

<script setup>

</script>

I also did set up [a Vuetify playground for live testing](https://play.vuetifyjs.com/#eNqllMlu2zAQhl+F4MUtYEl1ki4wnCDtqZdeiqKXMAdFGkesuYGknBiG3r1Dig4UW45h5Kbh/Pxm0XDutnTdgufLTf7P0Tnl0mjryZZUFkoPf3sf6cjSakkmSTthiil4jtJKK+dJcpDr1xc/bJkixDcgYY7QGpZlK/yf3p7UpV1NSDdlqvvIFJ3S78bkSMI8Fh6kEQi6CQBCFuusNCYZ6UCWXA1O0inm49EBlixFy2uy5EJkDfDHxu+J0wWrn0YcLzSBFQp3zegXRkklShe+NyCEfmL05ieUNYaaLYqofTfo4hzQtwHIcLVCzPi1k5WO8z8P+BZqxP/Czp4qdpz1dZx1ot5x1uziAPZDe6/laVhQvPHDz2j+1WHzf4chO84Yj93r08wOBxzPBxMezP4FLIrB20DT+Y0A4iptoI7ivB8qfG/kQVucqjmZmWdSY4ugJslJuijF7h3RBU8ShfKOqKIryBZFzCOlVFluPHHg25Bx9MYjNPCZ90sGqzO4dLTC5x7XBEsOxygui75sFtZTsBltvDduXhStMqvHvNKyuEVfYVvluYSs1vL2Mr/MP2WlME2ZXxU1d37ozsHJ7AH/gAOLgRnFxfMSI2yrY3GSG/GzHXa3NBF5gCqQvwabWVDYLrBvpr+nHSthT3JQRgiNf6DDzgr8HW6vqZWLDb3bZXhWfZKrPALC7fsQpJvSVzli1HiP3v8HlnPg2w==.

英文:

I inherited a project where I need the layout to use as much viewport space as possible both horizontally and vertically, and resize nicely too.

My layout is pretty simple, with 2 main rows split in two columns. I need to make it so the two main "cells" (marked "Main 1" and "Main 2" in the code below) expand vertically to use as much vertical space as possible.

My understanding is this can be achieved using a &lt;v-container fluid fill-height&gt;. But while the horizontal part works perfectly well, I can't get this layout to expand vertically.

Here is my App.vue file (simplified for the purpose of this post):

&lt;template&gt;
    &lt;v-app&gt;
        &lt;v-main&gt;
            &lt;v-container fluid fill-height&gt;
                &lt;v-row&gt;
                    &lt;v-col cols=&quot;6&quot; class=&quot;yellow&quot;&gt;Header 1&lt;/v-col&gt;
                    &lt;v-col cols=&quot;6&quot; class=&quot;yellow&quot;&gt;Header 2&lt;/v-col&gt;
                &lt;/v-row&gt;
              	&lt;v-row&gt;
                    &lt;v-col cols=&quot;8&quot; class=&quot;pink&quot;&gt;
                        &lt;v-row&gt;
                            &lt;v-col cols=&quot;5&quot; class=&quot;red&quot;&gt;Main 1&lt;/v-col&gt;
                            &lt;v-col cols=&quot;7&quot; class=&quot;red&quot;&gt;Main 2&lt;/v-col&gt;
                        &lt;/v-row&gt;
                        &lt;v-row&gt;
                            &lt;v-col cols=&quot;12&quot; class=&quot;red&quot;&gt;Bottom&lt;/v-col&gt;
                        &lt;/v-row&gt;
                    &lt;/v-col&gt;
                    &lt;v-col cols=&quot;4&quot; class=&quot;pink&quot;&gt;Right&lt;/v-col&gt;
                &lt;/v-row&gt;
            &lt;/v-container&gt;
        &lt;/v-main&gt;
    &lt;/v-app&gt;
&lt;/template&gt;

&lt;style scoped&gt;
  .yellow {  border: 1px dotted yellow  }
  .red {  border: 1px dotted red  }
  .pink {  border: 1px dotted pink  }
&lt;/style&gt;

&lt;script setup&gt;

&lt;/script&gt;

I also did set up a Vuetify playground for live testing.

答案1

得分: 2

好的,以下是翻译好的部分:

OK,希望这是您正在寻找的。请注意,我在容器和一些行上使用了Vuetify的flex实用类。这些类可帮助您使用flexbox布局页面。您可以在此处了解更多信息。

&lt;template&gt;
    &lt;v-app&gt;
        &lt;v-main class=&#39;d-flex&#39;&gt;
            &lt;v-container fluid fill-height class=&#39;d-flex flex-column&#39;&gt;
                &lt;v-row class=&#39;flex-grow-0&#39;&gt;
                    &lt;v-col cols=&quot;6&quot; class=&quot;yellow&quot;&gt;Header 1&lt;/v-col&gt;
                    &lt;v-col cols=&quot;6&quot; class=&quot;yellow&quot;&gt;Header 2&lt;/v-col&gt;
                &lt;/v-row&gt;
                &lt;v-row&gt;
                    &lt;v-col cols=&quot;8&quot; class=&quot;pink d-flex flex-column&quot;&gt;
                        &lt;v-row&gt;
                            &lt;v-col cols=&quot;5&quot; class=&quot;red&quot;&gt;Main 1&lt;/v-col&gt;
                            &lt;v-col cols=&quot;7&quot; class=&quot;red&quot;&gt;Main 2&lt;/v-col&gt;
                        &lt;/v-row&gt;
                        &lt;v-row class=&#39;flex-grow-0&#39;&gt;
                            &lt;v-col cols=&quot;12&quot; class=&quot;red&quot;&gt;Bottom&lt;/v-col&gt;
                        &lt;/v-row&gt;
                    &lt;/v-col&gt;
                    &lt;v-col cols=&quot;4&quot; class=&quot;pink&quot;&gt;Right&lt;/v-col&gt;
                &lt;/v-row&gt;
            &lt;/v-container&gt;
        &lt;/v-main&gt;
    &lt;/v-app&gt;
&lt;/template&gt;
英文:

OK, I hope this is what you were looking for. Notice how I made use of Vuetify's flex utility classes on the container and some of the rows. These classes are there to help you layout your page with flexbox. You can read more about it here.

&lt;template&gt;
    &lt;v-app&gt;
        &lt;v-main class=&#39;d-flex&#39;&gt;
            &lt;v-container fluid fill-height class=&#39;d-flex flex-column&#39;&gt;
                &lt;v-row class=&#39;flex-grow-0&#39;&gt;
                    &lt;v-col cols=&quot;6&quot; class=&quot;yellow&quot;&gt;Header 1&lt;/v-col&gt;
                    &lt;v-col cols=&quot;6&quot; class=&quot;yellow&quot;&gt;Header 2&lt;/v-col&gt;
                &lt;/v-row&gt;
                &lt;v-row&gt;
                    &lt;v-col cols=&quot;8&quot; class=&quot;pink d-flex flex-column&quot;&gt;
                        &lt;v-row&gt;
                            &lt;v-col cols=&quot;5&quot; class=&quot;red&quot;&gt;Main 1&lt;/v-col&gt;
                            &lt;v-col cols=&quot;7&quot; class=&quot;red&quot;&gt;Main 2&lt;/v-col&gt;
                        &lt;/v-row&gt;
                        &lt;v-row class=&#39;flex-grow-0&#39;&gt;
                            &lt;v-col cols=&quot;12&quot; class=&quot;red&quot;&gt;Bottom&lt;/v-col&gt;
                        &lt;/v-row&gt;
                    &lt;/v-col&gt;
                    &lt;v-col cols=&quot;4&quot; class=&quot;pink&quot;&gt;Right&lt;/v-col&gt;
                &lt;/v-row&gt;
            &lt;/v-container&gt;
        &lt;/v-main&gt;
    &lt;/v-app&gt;
&lt;/template&gt;

huangapple
  • 本文由 发表于 2023年2月14日 05:44:48
  • 转载请务必保留本文链接:https://go.coder-hub.com/75441483.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定