Vue.js：使用范圍內的CSS設置div的位置和大小

Question

我正在使用具有以下結構的Vue.js開發Web應用程序：

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

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

<HomePage>和<Game>將有條件地渲染，並且不會同時顯示。 它們的子組件也是如此。

現在，我希望當前顯示的子組件（或子組件的根<div> ）填充整個瀏覽器窗口。 因此，例如<ErrorPage/>或<GameScreen/>應該拉伸到完整大小。

我一直在嘗試使用position: absolute各種組合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-div替換為<Game>元素的選擇器。