Vuejs 요소에서이 레이아웃을 생성 할 수 없습니다

안녕하세요, 저는 생각할 수있는 모든 CSS 조합을 시도했지만 이처럼 레이아웃을 생성 할 수 없습니다.Vuejs 요소에서이 레이아웃을 생성 할 수 없습니다

navbar 및 Tab 컨트롤을 포함한 모든 항목이 스크롤됩니다.

<el-row> 
    <el-menu class="el-menu-demo" mode="horizontal"> ..</<el-menu> 
</el-row> 
<el-row> 
<el-tabs> 
    <el-tab-pane>...</el-tab-pane> 
<el-tabs> 
</el-row>

최종 예상 결과

출처

2017-10-02 Serak Shiferaw

이 Vue.JS 함께 할 수 없다, 그러나 여기에 문제의 단지 일반 CSS입니다.

일반적으로 고정 요소 (예 : navbar, footer)가있는 "전체 창"레이아웃을 사용하려면 이러한 요소에 절대 위치 지정을 사용하는 것이 가장 좋습니다. https://jsfiddle.net/5wgb94kv/

기본 아이디어 :

나는 그런 레이아웃을 생성하는 작은 JSFiddle을 만들었습니다

탐색 바에서 (고정 된 높이와 창 상단에 절대적 위치

CSS : position:absolute; top:0; height:25px;).
탭 막대는 꼭대기에 있지만 너버 아래에 절대적으로 배치됩니다. (CSS : position:absolute; top:25px; height:25px;) 콘텐츠가 스크롤 상하 및 오버플 X 세트에서 올바른 세트로, 그리고 절대 위치
푸터는 저부 (position:absolute; bottom:0; height:25px; CSS)에 완전히 위치한다. CSS : position:absolute; top: 50px; bottom:25px; overflow-x: scroll;

전체 CSS에 대한 자세한 내용은 jsfiddle를 참조하십시오.

출처

2017-10-03 07:59:27 cello

Vuejs 요소에서이 레이아웃을 생성 할 수 없습니다

답변

관련 문제