vuejs 응용 프로그램의 고정 푸터

Question

내 vuejs 응용 프로그램에서 끈적 인 바닥 글 작업을하는 데 어려움을 겪고 있습니다.

vuejs와 같은 다른 프레임 워크는 루트 요소가 템플릿에 있어야합니다.

하지만 Flex를 사용하여 끈적 인 바닥 글을 추가하는 것은 어렵습니다. 루트 요소가없는

:

<div class="content"> 
    <h1>Sticky Footer with Flexbox</h1> 
    <p> 
    <button id="add">Add Content</button> 
    </p> 
</div> 

<footer class="footer"> 
    Footer 
</footer> 

모든 작동하지만, 루트 요소로, 그렇지 않습니다.

<div> 
    <div class="content"> 
    <h1>Sticky Footer with Flexbox</h1> 
    <p> 
     <button id="add">Add Content</button> 
    </p> 
    </div> 

    <footer class="footer"> 
    Footer 
    </footer> 
</div> 

루트 요소를 제거하는 것은 옵션이 아니므로 루트 요소로 작업 할 수 있도록 CSS를 어떻게 업데이트 할 수 있습니까?

JsFiddle

Answer 1

당신은 외부 div (예 id="app"을)에 id을 설정하고 body에 대해 정의 된 CSS-규칙을 사용할 수 있습니다

<div id="app"> 
    ... 
</div> 

html, body { 
    height: 100%; 
} 

#app { 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
} 

https://jsfiddle.net/Low3fbs1/4/