我在使用CSS弹性框和CSS网格布局页面时遇到麻烦

时间：2020-06-26 16:00:05

标签： html css flexbox css-grid

  1. 我正在使用HTML和CSS [ css flexbox 和 css网格]（目前只是布局，尚无逻辑）制作这款跳棋游戏。布局已经完成，除了该页面没有垂直响应之外，其他所有内容看起来都很不错。当我垂直减小浏览器尺寸（Chrome）时，棋盘格（包裹在容器中）会退出其容器（也包裹在section中的容器），并一直重叠到{ {1}}以及nav之外。预览代码段时，您可以清楚地看到它。 PS：在整个视口高度下，它看起来还不错。在降低浏览器高度时会弄乱。
  2. 此外，让我问一下如何布局页面：section占据了视口高度的20％，nav占据了视口的其余部分。在我的代码中查看我是如何做到的，并为我提供了一种更好的方法，因为我的工作没有解决。

编辑：我真正需要的是我希望以某种方式将棋盘锁定在其父项（在我的场景中是其部分）中，以便在调整浏览器的视口高度时应保留包含在其父对象之内且不超出其父对象，并且与其他部分（在本例中为导航）重叠。 你看到推特吗？尝试将浏览器高度降低到绝对为零，您会看到页面的内容/元素没有受到影响，而是浏览器只是将它们包裹或覆盖起来（不会使twitter元素变形）。那就是我想要的 

section
body {
    margin: 0 auto;
}


/* THE NAV */

nav {
    background: black;
    height: 20vh;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* SECTION */

section {
    background: pink;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

h1 {
    font-family: 'Architects Daughter', cursive;
    font-size: 3rem;
}


/* setting up the board */

.container {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
}

.zone-1 {
    background: #CEB67B;
    width: 60px;
    height: 60px;
}

.zone-2 {
    background: #735131;
    width: 60px;
    height: 60px;
}


/* Checkers */

.checkers-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-checkers {
    cursor: pointer;
    height: 35px;
    width: 35px;
    border-radius: 30px;
    background: red;
    border: 3px solid white;
}

.away-checkers {
    cursor: pointer;
    height: 35px;
    width: 35px;
    border-radius: 30px;
    border: 3px solid white;
    background: black;
}

1 个答案:

答案 0 :(得分：0)

您需要根据屏幕高度使木板成正方形

width: calc(80vh / 8); height: calc(80vh / 8);而不是width: 60px; height: 60px;。

我们有80vh可玩，有8个垂直堆叠的方块。因此，您可以运行height: calc(80vh / 8);来找到该大小。然后，使每个正方形的宽度与高度width: calc(80vh / 8);相同。

body {
    margin: 0 auto;
}


/* THE NAV */

nav {
    background: black;
    height: 20vh;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* SECTION */

section {
    background: pink;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

h1 {
    font-family: 'Architects Daughter', cursive;
    font-size: 3rem;
}


/* setting up the board */

.container {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
}

.zone-1 {
    background: #CEB67B;
    width: calc(80vh / 8);
    height: calc(80vh / 8);
}

.zone-2 {
    background: #735131;
    width: calc(80vh / 8);
    height: calc(80vh / 8);
}


/* Checkers */

.checkers-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-checkers {
    cursor: pointer;
    height: 35px;
    width: 35px;
    border-radius: 30px;
    background: red;
    border: 3px solid white;
}

.away-checkers {
    cursor: pointer;
    height: 35px;
    width: 35px;
    border-radius: 30px;
    border: 3px solid white;
    background: black;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Grid Checkers</title>

    <link rel="stylesheet" href="gridDraft.css" />

    <!-- fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap" rel="stylesheet" />
</head>

<body>
    <nav>
        <h1>Checkers Game</h1>
    </nav>
    <section>
        <div class="container">
            <!-- Home Section -->

            <!-- row-1 -->
            <div class="zone-1"></div>
            <div class="zone-2 checkers-container">
                <div class="home-checkers"></div>
            </div>
            <div class="zone-1"></div>
            <div class="zone-2 checkers-container">
                <div class="home-checkers"></div>
            </div>
            <div class="zone-1"></div>
            <div class="zone-2 checkers-container">
                <div class="home-checkers"></div>
            </div>
            <div class="zone-1"></div>
            <div class="zone-2 checkers-container">
                <div class="home-checkers"></div>
            </div>

            <!-- row-2 -->
            <div class="zone-2 checkers-container">
                <div class="home-checkers"></div>
            </div>
            <div class="zone-1"></div>
            <div class="zone-2 checkers-container">
                <div class="home-checkers"></div>
            </div>
            <div class="zone-1"></div>
            <div class="zone-2 checkers-container">
                <div class="home-checkers"></div>
            </div>
            <div class="zone-1"></div>
            <div class="zone-2 checkers-container">
                <div class="home-checkers"></div>
            </div>
            <div class="zone-1"></div>

            <!-- row-3 -->
            <div class="zone-1"></div>
            <div class="zone-2 checkers-container">
                <div class="home-checkers"></div>
            </div>
            <div class="zone-1"></div>
            <div class="zone-2 checkers-container">
                <div class="home-checkers"></div>
            </div>
            <div class="zone-1"></div>
            <div class="zone-2 checkers-container">
                <div class="home-checkers"></div>
            </div>
            <div class="zone-1"></div>
            <div class="zone-2 checkers-container">
                <div class="home-checkers"></div>
            </div>

            <!-- Empty rows start here -->

            <!-- row-4 -->
            <div class="zone-2"></div>
            <div class="zone-1"></div>
            <div class="zone-2"></div>
            <div class="zone-1"></div>
            <div class="zone-2"></div>
            <div class="zone-1"></div>
            <div class="zone-2"></div>
            <div class="zone-1"></div>

            <!-- row-5 -->
            <div class="zone-1"></div>
            <div class="zone-2"></div>
            <div class="zone-1"></div>
            <div class="zone-2"></div>
            <div class="zone-1"></div>
            <div class="zone-2"></div>
            <div class="zone-1"></div>
            <div class="zone-2"></div>

            <!-- Empty rows end here -->

            <!-- Away Section -->

            <!-- row-6 -->
            <div class="zone-2 checkers-container">
                <div class="away-checkers"></div>
            </div>
            <div class="zone-1"></div>
            <div class="zone-2 checkers-container">
                <div class="away-checkers"></div>
            </div>
            <div class="zone-1"></div>
            <div class="zone-2 checkers-container">
                <div class="away-checkers"></div>
            </div>
            <div class="zone-1"></div>
            <div class="zone-2 checkers-container">
                <div class="away-checkers"></div>
            </div>
            <div class="zone-1"></div>
            <!-- row-7 -->
            <div class="zone-1"></div>
            <div class="zone-2 checkers-container">
                <div class="away-checkers"></div>
            </div>
            <div class="zone-1"></div>
            <div class="zone-2 checkers-container">
                <div class="away-checkers"></div>
            </div>
            <div class="zone-1"></div>
            <div class="zone-2 checkers-container">
                <div class="away-checkers"></div>
            </div>
            <div class="zone-1"></div>
            <div class="zone-2 checkers-container">
                <div class="away-checkers"></div>
            </div>

            <!-- row-8 -->
            <div class="zone-2 checkers-container">
                <div class="away-checkers"></div>
            </div>
            <div class="zone-1"></div>
            <div class="zone-2 checkers-container">
                <div class="away-checkers"></div>
            </div>
            <div class="zone-1"></div>
            <div class="zone-2 checkers-container">
                <div class="away-checkers"></div>
            </div>
            <div class="zone-1"></div>
            <div class="zone-2 checkers-container">
                <div class="away-checkers"></div>
            </div>
            <div class="zone-1"></div>
        </div>
    </section>
</body>

</html>

相关问题
最新问题