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/