Vue.js：使用范围内的CSS设置div的位置和大小

Question

I'm working on a web application using Vue.js that has the following structure:

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

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

<HomePage> and <Game> are going to be conditionally rendered and will not be visible at the same time. The same applies also for their child components.

Now I would like the currently displayed child component (or the root <div> of the child component) to fill the whole browser window. So for example <ErrorPage/> or <GameScreen/> should be stretched to full size.

I've been trying all kinds of combinations using position: absolute , width , height etc., but still the child components only take up a small part of the window. This has probably something to do with the way <style scoped> works in Vue.js, because in an old prototype of my application (which didn't use Vue.js) things worked fine. But just removing the scoped attribute doesn't help.

Does anyone have an idea where to place the right CSS to make things work?

Answer 1

Try something along these lines:

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

Replace .game-div with the selector for your <Game> element.