CODEWITHSUNDEEP
javascriptcssvue.js
lsgng
lsgng

Reputation: 495

Vue.js: Setting div position and size using scoped CSS

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?

Upvotes: 1

Views: 1134

Answers (1)

maxpaj
maxpaj

Reputation: 6781

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.

Upvotes: 2

Related Questions