Question

我正在使用具有以下结构的Vue.js开发Web应用程序：

<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-div替换为<Game>元素的选择器。

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

1 个答案: