Vuetify 전체 화면 회전 장치

내 사이트의 홈 페이지의 경우 여기에 일부 텍스트가있는 전체 화면 회전 장치를 사용할 계획입니다. 컨베이어를 만들 수는 있지만 전체 화면을 만들 수는 없습니다. (장치 크기에 관계없이 스크롤 할 필요가 없기를 바래요.) 여러 가지를 시도했지만 아무 것도 작동하지 않았습니다.Vuetify 전체 화면 회전 장치

맨 위에 도구 모음이 있습니다. . 방해이 작동하지 발생할 것으로 보인다 페이지의

나는 시도했다 :

<v-carousel style="height: 100%" hide-controls> 

<v-carousel fullscreen hide-controls> 

<v-carousel fill-height hide-controls>

그러나 그들 모두는 모든 일이 사라 또는 것 같다 것과 회전 목마 스틱을 만드는 중 기본 최대 높이

예 : https://codepen.io/anon/pen/EwqWqP

어떻게 풀 스크린 회전 목마를 얻을 수 있습니까?

출처

2017-10-24 Akaash Dash

코드 공유. – pirs

@pirs 질문을 업데이트했습니다. –

height: 100% 등의 상위 요소 (예 : <body> 또는 <some-other-div>)도 약간의 높이가 필요하기 때문에 작동하지 않습니다.

당신처럼, 당신의 부모 컨테이너 height:100vh 및 height:100%로 회전 목마를 설정하는 것입니다 할 수있는 일 :

HTML

<div id="app"> 
    <v-app id="inspire"> 
    <v-toolbar></v-toolbar> 
    <v-carousel style="height:100%"> 
     <v-carousel-item v-for="(item,i) in items" v-bind:src="item.src" :key="i"></v-carousel-item> 
    </v-carousel> 
    </v-app> 
</div>

CSS는

#inspire { 
    height: 100vh; 
}

이 작동하는 것 같다 나를 위해 → Example

출처

2017-10-24 05:49:08 Beat

이것은 vh가 도구 모음을 무시하는 것처럼 보이지 않으므로 작동하지 않았습니다. 나는 적절하게 질문을 업데이트했다. –

내 대답 업데이트 ... – Beat

이 작품! 고맙습니다. –

답변

관련 문제