vuetify의 v-module 높이가 100%가 되지 않음

vuetify의 v-module 높이가 100%가 되지 않음

그v-tabs컴포넌트의 높이가 100%가 아닙니다.검사 결과, 모든 탭 항목(탭 내용)이 내부로 포장되어 있는 것을 알 수 있었습니다.

<div class='v-tab__items'>  
  your content  
</div>

의 타겟팅 방법v-tab__items수업? 아니면 같은 일을 할 수 있는 다른 방법이 있을까요?나는 그 일을 시도했다.heightVuetify의 API는 원하는 결과를 얻지 못했습니다.

어떤 도움이라도 감사합니다:)

맥락

제 문제를 해결하기 위해 검색하다가 이 질문을 발견하여 여기에 답을 올렸습니다.내 경우 탭 컨텐츠가 모든 높이를 차지하기를 원했다.당신의 문제와 비슷하게 들리지만, 질문에 구체적인 내용이 없기 때문에 몇 가지 추측을 해보겠습니다.

솔루션

부터v-tab__items콘텐츠의 높이를 가지며 원하는 높이를 가진 콘텐츠의 부모 요소를 만듭니다.이 경우 뷰포트 높이를 사용합니다(탭에는 자체 높이도 있기 때문에 콘텐츠는 이를 고려해야 합니다).나는 이것을 와 함께 사용한다.<v-layout align-center justify-center column fill-height/>. 다음의 예를 참조해 주세요.

new Vue({
  el: '#app'
})

.tab-item-wrapper {
  /* vuetify sets the v-tabs__container height to 48px */
  height: calc(100vh - 48px)
}

<link href="https://cdn.jsdelivr.net/npm/vuetify@1.2.6/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.2.6/dist/vuetify.min.js"></script>

<div id="app">
  <v-app>
    <v-tabs>
      <v-tab>tab</v-tab>
      <v-tab-item>
        <div class="tab-item-wrapper">
          <v-layout align-center justify-center column fill-height>
            <v-btn color="success">Success</v-btn>
            <v-btn color="error" outline>Error</v-btn>
          </v-layout>
        </div>
      </v-tab-item>
    </v-tabs>
  </v-app>
</div>

주의: 하드코딩을 피할 수 있는 솔루션을 찾을 수 없었습니다.tab-heightVuetify 스타일에 하드코드되어 있는 동안은 변수로 노출되지 않습니다.

편집 v-layout에 대한 업데이트된 스니펫 시작 태그가 자동으로 닫힙니다.

Vuetify 2에서는 이 방법이 효과가 있습니다.

.v-tabs-items.full-height-tab  .v-window-item {
  height: calc(100vh - 270px); /* Adjust 270px to suits your needs */
  overflow-y: auto;
}

<v-tabs-items class="full-height-tab">
    <v-tab-item>...</v-tab-item>
    <v-tab-item>...</v-tab-item>
</v-tabs-items>

맥락

나는 @a-m과 같은 문제를 해결하려다 이 질문을 발견했지만, 그들의 해법은 하나의 진실원칙을 존중하지 않는다.한다면v-tabs향후 Vuetify 버전에서 높이가 변경되면 레이아웃이 예상대로 작동하지 않게 됩니다.calc()다시 작성해야 합니다.논리적으로 탭 항목은 헤더 높이에 대해 아무것도 알지 못합니다.

게다가.v-tab-item안에 있어서는 안 된다v-tabs단, 별개로v-tabs-items요소.

---

나의 솔루션

일반적으로 이것은 Vuetify 문제가 아니라 순수한 CSS 문제입니다.부모 높이가 계산되어도 플렉스박스와 속성만으로 해결할 수 있습니다.

좀 더 전문화된 스레드에서의 답변과 JSFiddle의 예를 참조하십시오.v-tabs.

이 경우의 유일한 차이점은 다음 명령어를 사용할 필요가 있다는 것입니다.!important설정 시 수식자overflow: auto에v-tabs-items.

2시간 동안 찾고 있었어요하지만 나는 찾았다

.tabs__content
    {
        min-height: 100vh;
    }

Vuetify 2.3.10 용 심플한 솔루션:

된 성분<v-tabs>,<v-tab> ★★★★★★★★★★★★★★★★★」<v-tab-item> , :것스스::: , , , , , , , , , , , 。

 .v-window__container {
   min-height: 100vh;
 }

CSS 셀렉터는 단일 파일컴포넌트 내에서 보다 큰 고유성으로 설정할 수 있습니다.

<style>
  .my-component .v-tab__items
  {
    height: 100%;
  }
</style>

언급URL : https://stackoverflow.com/questions/51256542/v-tabs-in-vuetify-is-not-taking-100-height