调整Vuetify的v-footer组件高度无效，该如何解决？

尝试缩小Vuetify框架中v-footer组件的高度，根据官方文档说明可使用height属性进行设置，但无论设置height="100px"还是height="50%"，footer高度均无变化。

代码示例：

<v-footer absolute class="bg-light-blue-lighten-3 d-flex flex-column justify-center align-center"  height="100px">
    <p class="font-weight-bold text-h6">sample text</p>
    <p class="font-weight-bold">sample text</p>
    <p>sample text</p>
    <p>sample text</p>
    <p><v-icon icon="mdi-map-marker"></v-icon>location<p>
</v-footer>

footer截图：

问题原因 #

你给v-footer添加了d-flex flex-column类，同时内部包含多个自带默认margin和行高的<p>元素，flex布局会让子元素占据必要的空间，直接把footer高度撑开，导致设置的height属性被忽略。另外justify-center align-center这类flex对齐规则，也会让内容在可用空间内居中，若内容总高度超过设置的height，footer依然会被撑大。

解决方法 #

方法一：限制内部内容高度，处理溢出

给v-footer添加overflow-hidden类，或者给内部内容套一个容器并设置最大高度，超出部分可选择滚动或隐藏：

<v-footer absolute class="bg-light-blue-lighten-3 d-flex flex-column justify-center align-center overflow-hidden" height="100px">
    <div style="max-height: 100%; overflow-y: auto;">
        <p class="font-weight-bold text-h6">sample text</p>
        <p class="font-weight-bold">sample text</p>
        <p>sample text</p>
        <p>sample text</p>
        <p><v-icon icon="mdi-map-marker"></v-icon>location<p>
    </div>
</v-footer>

方法二：移除flex布局，改用padding/间距调整对齐

如果不需要flex布局，去掉d-flex flex-column类，通过调整内边距和元素间距来控制内容位置，此时height属性会正常生效：

<v-footer absolute class="bg-light-blue-lighten-3 text-center" height="100px" style="padding: 10px 0;">
    <p class="font-weight-bold text-h6 mb-1">sample text</p>
    <p class="font-weight-bold mb-1">sample text</p>
    <p class="mb-1">sample text</p>
    <p class="mb-1">sample text</p>
    <p><v-icon icon="mdi-map-marker"></v-icon>location<p>
</v-footer>

方法三：强制覆盖高度样式

用内联样式结合!important强制设置高度，同时配合overflow处理内容溢出：

<v-footer absolute class="bg-light-blue-lighten-3 d-flex flex-column justify-center align-center overflow-hidden" style="height: 100px !important;">
    <p class="font-weight-bold text-h6">sample text</p>
    <p class="font-weight-bold">sample text</p>
    <p>sample text</p>
    <p>sample text</p>
    <p><v-icon icon="mdi-map-marker"></v-icon>location<p>
</v-footer>

内容的提问来源于stack exchange，提问作者kriloots