文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >我在使用CSS弹出框和CSS网格布局页面时遇到了问题。

问我在使用CSS弹出框和CSS网格布局页面时遇到了问题。
EN

Stack Overflow用户
提问于 2020-06-26 16:00:05
回答 1查看 57关注 0票数 0
  1. 我正在用HTML和CSS and 制作这个棋子游戏。布局是完整的，一切看起来都很棒，除了，页面没有垂直响应。当我垂直缩小浏览器大小(Chrome)时，棋盘(包装在容器中)会从容器(也被包装在section中的容器)中出来，并一直重叠到nav和section。当您预览代码片段时，可以清楚地看到它。PS:在完整的视口高度上，它看起来很好，它在减少的浏览器上搞砸了，让我问一下如何布局页面是这样一种方式，即nav占用了视图高度的20%，而section占用了视图的其余部分。在我的代码中看到了我是如何做到的，并给了我一个更好的方法来完成它，因为我做的事情没有成功。

编辑:我实际上需要的是，我希望棋盘以某种方式锁定在其父部分(在我的场景中，它是一个节)中，这样，当调整浏览器的视口高度时，它应该保持在其父页面中，而不超出父部分和重叠其他部分(在本例中，是nav)。看到推特了吗？尝试将浏览器高度降低到绝对为零，您将看到页面的内容/元素没有受到影响，而是浏览器只是包装或覆盖它们(没有twitter元素被扭曲)。这就是我想要的

​

代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<!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>

​

flexbox
css-grid
html
css
EN

回答 1

Stack Overflow用户

发布于 2020-06-26 16:09:27

您需要使板方块响应屏幕高度。

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

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

​

代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<!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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/62598526

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档