Question

我试图仅在我给出的窗口大小中调整页面的所有元素。我怎样才能让游戏div尽可能地保持最低限度，但是尽可能多地覆盖它所需要的标题，以便它不需要滚动就能保留在页面上？

我已经尝试将位置设置为绝对位置，但这使得它立即移动到顶部并覆盖所有内容，而不是仅覆盖可能的最小量。

以下是相关代码：

HTML

    <head>
        <meta charset="UTF-8">
        <title>Roll A Zombie!</title>
        <script src="Game/Build/UnityLoader.js"></script>
        <script>
                var gameInstance = UnityLoader.instantiate("gameContainer", "Game/Build/Game.json");
        </script>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <img src="Assets/banner.png" alt="Game Title" id="gameBanner">
        <img src="Assets/left.png" alt="Left Zombies" id="leftZombie">
        <img src="Assets/right.png" alt="Right Zombies" id="rightZombie">

        <div id="game">
            <div id="gameContainer"/>
        </div>
    </body>

和CSS

    body{
        background-color: #c574ac;
        background-image: url("Assets/background.png");
        background-position: center;
    }

#gameBanner{
    display: block;
    margin: 0 auto;
}

#game{
    width: 80%;
    margin: auto; 

    border: 5px solid #000000;
    box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0.3), 
                0px 20px 15px 0px rgba(0, 0, 0, 0.6); 
}

#leftZombie, #rightZombie{
    top:30%;
    z-index: -1;
}

#leftZombie{
    float:left;
    position:absolute; 
    left: 0;
}

#rightZombie{
    float:right;
    position: absolute;
    right: 0;
}

如何适应窗口高度内的所有元素？

0 个答案: