Vue.js：私は以下の構造を有するVue.js使用してWebアプリケーションに取り組んでいるスコープCSS

Question

を使用してdivの位置とサイズを設定する：

<App> 
    <HomePage> 
     <ErrorPage/> 
     <StartPage/> 
     <ExitPage/> 
    </HomePage> 

    <Game> 
     <GameScreen/> 
    </Game> 
</App> 

<HomePage>と<Game>は条件付きでレンダリングされようとしていると同時に表示されません。子コンポーネントについても同様です。

今現在表示されている子コンポーネント（または子コンポーネントのルート<div>）がブラウザウィンドウ全体を埋めるようにしたいと思います。したがって、たとえば<ErrorPage/>または<GameScreen/>はフルサイズに伸ばす必要があります。

position: absolute、width、heightなどを使用してすべての種類の組み合わせを試していますが、子コンポーネントはウィンドウの小さな部分しか占めていません。これはおそらく、<style scoped>がVue.jsで動作する方法と関係しています。なぜなら、私のアプリケーション（Vue.jsを使用していない）の古いプロトタイプでは正常に動作していたからです。しかし、scoped属性を削除するだけでは役に立ちません。

誰かが正しいCSSを配置して動作させるためのアイデアはありますか？

Answer 1

は、これらの線に沿って何かを試してみてください：

.game-div { 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
} 

は、あなたの<Game>要素のセレクターで.game-divを交換してください。