我在使用 CSS flex-box 和 CSS 网格布局页面时遇到问题

【问题标题】：I'm having trouble with laying out my page using CSS flex-box and CSS grid我在使用 CSS flex-box 和 CSS 网格布局页面时遇到问题
【发布时间】：2020-06-27 02:32:26
【问题描述】：
  1. 我正在使用 HTML 和 CSS[css flexbox 和 css 网格] 制作这个跳棋游戏（目前只是布局，还没有逻辑）。布局是完整的，除了页面没有垂直响应之外，一切看起来都很棒。当我垂直减小浏览器尺寸（Chrome）时，棋盘（包裹在容器中）脱离其容器（容器也包裹在section中）并一直重叠到nav并且还超出了section。预览代码sn-p可以清楚的看到。 PS：在全视口高度上它看起来还不错它在降低浏览器高度时搞砸了。
  2. 另外，让我问一下如何布局页面，nav 占据视口高度的 20%，section 占据视口的剩余部分。在我的代码中查看我是如何做到的，并给我一个更好的方法来做到这一点，因为我所做的没有成功。

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

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;
}
<!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>

【问题讨论】：

标签： html css flexbox css-grid


【解决方案1】：

您需要让棋盘格响应屏幕高度

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>

【讨论】：

  • 感谢您的贡献，但这以某种方式改变了我的布局。棋盘现在就像附着在部分的边缘，尤其是顶部。当我放一些边距时，它只会在底部增加一个额外的空间。就像它将部分推离视口一样。。难道没有一种方法可以像锁定我的棋盘，这样它就不会在调整大小（尤其是垂直）时超出其边界@AdamBraid
  • 而且我注意到，随着您的贡献，当屏幕变小...棋盘乱了..尝试运行代码并只查看预览而不是全屏
猜你喜欢
  • 2021-10-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-11-27
  • 1970-01-01
  • 2018-10-19
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode