html - 文章网格没有一直延伸到边缘-6ren

html - 文章网格没有一直延伸到边缘

转载作者：行者123 更新时间：2023-11-28 16:51:01

为什么文章网格没有一直延伸到屏幕边缘，而是缩短了，因此在屏幕边缘和文章网格之间留下了一个难看的空隙？

我假设我一开始就错误地设置了网格。但是，我的其他网页页面不存在此问题。

body {
    background-image: url(../media/Grocerytheme2.jpg);
    background-position: center;
    /* Center the image */
    background-repeat: no-repeat;
    /* Do not repeat the image */
    background-size: cover;
    display: grid;
    grid-template-areas:
        "header header header"
        "nav article article"
        "nav footer footer";
    grid-template-rows: 80px 1fr 100px;
    grid-template-columns: 20% 1fr 15%;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    height: 100vh;
    margin: 0;
}

header {
    padding: 1.2em;
    background-color: #ffffff;
    border: 1px solid black;
    opacity: 0.6;
    filter: alpha(opacity=60);
    /* For IE8 and earlier */
    /*background: #99ffbb;*/
}

header p,
article p,
footer p,
nav p {
    font-weight: bold;
    color: #000000;
}


footer,
nav {
    padding: 1.2em;
    border: 1px solid black;
    opacity: 0.6;
    filter: alpha(opacity=60);
}

article {
    padding: 1.2em;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid black;
    position: relative;
}

#pageHeader {
    grid-area: header;
}

#pageFooter {
    grid-area: footer;
}

#mainArticle {
    grid-area: article;
}

#mainNav {
    grid-area: nav;
}

@media all and (max-width: 575px) {
    body {
        grid-template-areas:
            "header"
            "article"
            "nav"
            "footer";
        grid-template-rows: 80px 1fr 70px 1fr 70px;
        grid-template-columns: 1fr;
    }
}

h1 {
    text-align: center;
}

h2 {
    text-align: left;
}

.navbar {
    margin: 0;
    padding: 0px;
    overflow: hidden;
}

nav li {
    list-style-type: none;
    margin: 2em 0;
}

nav li a {
    color: black;
    text-align: left;
    padding: 2px 4px;
    font-size: 1em;
    text-decoration: none;
}

li a.active {
    background-color: #4CAF50;
    color: white;
    padding: 5px;
}

nav li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

.subnav-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 100px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 1);
    z-index: 1;
}

.subnav-content a {
    font-size: 0.8em;
    color: black;
    padding: 12px 12px;
    text-decoration: none;
    display: block;
}

.subnavbtn a.active {
    color: white;
}


.subnav-content a:hover {
    background-color: #555;
}

.subnav:hover .subnav-content {
    display: block;
}

.subnav:hover .subnavbtn {
    -color: #555;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title> CS425 </title>
</head>

<body>
    <header id="pageHeader">
        <h1> <b> Grocos </b> </h1>
    </header>
    <nav id="mainNav">
        <div class="navbar">
            <li><a href="HomePage.html"> Home </a></li>
            <li><a href="Sign_up_pg.html"> login </a></li>
            <div class="subnav">
                <div class="subnavbtn">Shop <i class="pulldown"></i></div>
                <div class="subnav-content">
                    <li><a href="poultry.html"> Poultry</a></li>
                    <li><a href="fruits.html"> Fruits </a></li>
                    <li><a href="vegetables.html"> Vegetables </a></li>
                    <li><a href="consumables.html"> Snacks </a></li>
                </div>
            </div>
        </div>
    </nav>
    <article>
        <section class="container content-section">
            <h2 class="section-header">Poultry</h2>
            <div class="shop-items">
                <div class="shop-item">
                    <span class="shop-item-title">Dozen Eggs</span>
                    <img class="shop-item-image" src="media/Eggs.jpg">
                    <div class="shop-item-details">
                        <span class="shop-item-price">$2.00</span>
                        <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
                    </div>
                </div>
                <div class="shop-item">
                    <span class="shop-item-title">Whole chicken</span>
                    <img class="shop-item-image" src="media/WholeChicken.jpg">
                    <div class="shop-item-details">
                        <span class="shop-item-price">$10.00</span>
                        <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
                    </div>
                </div>
                <div class="shop-item">
                    <span class="shop-item-title">Lamb chop</span>
                    <img class="shop-item-image" src="media/Lamb.jpg">
                    <div class="shop-item-details">
                        <span class="shop-item-price">$1.50</span>
                        <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
                    </div>
                </div>
                <div class="shop-item">
                    <span class="shop-item-title">mutton (leg cut)</span>
                    <img class="shop-item-image" src="media/Goat.jpg">
                    <div class="shop-item-details">
                        <span class="shop-item-price">$5.00</span>
                        <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
                    </div>
                </div>
                div class="shop-item">
                <span class="shop-item-title">Milk </span>
                <img class="shop-item-image" src="media/Milk.jpg">
                <div class="shop-item-details">
                    <span class="shop-item-price">$2.00</span>
                    <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
                </div>
            </div>

        </section>

        <section class="container content-section">
            <h2 class="section-header">CART</h2>
            <div class="cart-row">
                <span class="cart-item cart-header cart-column">ITEM</span>
                <span class="cart-price cart-header cart-column">PRICE</span>
                <span class="cart-quantity cart-header cart-column">QUANTITY</span>
            </div>
            <div class="cart-items">
            </div>
            <div class="cart-total">
                <strong class="cart-total-title">Total</strong>
                <span class="cart-total-price">$0</span>
            </div>
            <button class="btn btn-primary btn-purchase" type="button">PURCHASE</button>
        </section>
    </article>
    <footer id="pageFooter">
        <p><em> Contact info: </em> <strong>+1999999999</strong> </p>
        <p> email us at: <a href="mailto:something.edu"> something.edu </a></p>
    </footer>
</body>

</html>

最佳答案

将 grid-area:article 添加到您的文章 CSS 定义中

article {
    padding: 1.2em;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid black;
    position: relative;
    grid-area: article;
}

关于html - 文章网格没有一直延伸到边缘，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59016179/

文章推荐： javascript - IE - 上传新图像时，显示旧图像

文章推荐： python - 使用 mako 模板处理 404 错误

文章推荐： Python:检测重新定义？

python - 文章/api/文章 : Cannot import name ArticleResource 处出现导入错误
我正在尝试创建一个 Django 网站，每次在本地主机上运行/articles/api/article 页面时:我都会收到此回溯: Environment: Request Method: GET R
Facebook 开放图谱对象类型 - 文章？
我正在尽最大努力理解开放图谱协议(protocol)中的一切含义阅读 FB page在上面和 OGP Page .这在 FB 和 OGP 的世界中究竟意味着什么: Note that the Open
html - 页脚重叠内容/文章
我的 HTML/CSS 中存在页脚与文章内容重叠的问题。是的，我一直在网上搜索但似乎没有任何效果，我希望你知道它有什么问题。我在这里做了一个codepen: CodePen LINK
algorithm - 关于空间索引的好书/文章
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。关闭 7 年前。
javascript - 为什么函数中的变量没有传递给 HTML 文章？
我可以将变量作为警报显示在函数中，但无法将变量传递给文章。我做错了什么？我知道“a”保存了正确的信息，因为我已经通过警报显示了它。我尝试使用以下方式传递变量:placeholderContent.
ruby - Ruby 中的 A/An 文章
这个问题已经有答案了: Rails article helper - "a" or "an" (6 个回答) 已关闭 3 年前。是否有类似 [#pluralize in ActiveSupport]
ruby - Ruby 中的 A/An 文章
这个问题已经有答案了: Rails article helper - "a" or "an" (6 个回答) 已关闭 3 年前。是否有类似 [#pluralize in ActiveSupport]
mysql - 书籍-文章-图像的数据库架构建议
我有以下型号。 Book has Articles (Article has foreign key to Book) Article has Images (Article has upto #ma
php - 如何过滤多个类别并显示它的帖子/文章 PHP
我创建了一个页面，该页面显示了单个类别下的所有帖子，即如果我单击类别音乐，我将获得与音乐类别相关的所有文章。但我的目标是创建一个过滤选项，它可以过滤掉某些类别，并且只显示与您过滤的类别相关的所有帖
php - 关于从数据库中获取 Joomla 文章
我使用这样的代码: $query = "SELECT introtext FROM #__content WHERE alias = '$alias'"; $db->setQuery($query);
css - Joomla 文章/列插入填充
我在主页上设置了一些特色文章。显示的所有文章似乎都剩下太多填充。我知道足以进入 css 并在 layout.css 上编辑 .itembody 的填充或边距，但似乎没有任何改变。我希望我的文章通过模块
java - ORM:文章、修订和主要修订
ORM 中存储文章及其修订的最佳实践是什么？当我自己用SQL存储时，我曾经有以下结构: articles [id, parent_id, name, text] 通过parent_id，我可以轻松识
html - 输入单选激活时按类值激活显示 block 文章？
我的 HTML : Interest About Interest
javascript - mongodb 文章.长度未定义
我正在用jade构建一个nodejs、express、mongodb博客。我的文件夹结构是:项目/ 模块/ 观点/ 索引.jade 应用程序.js 文章提供者内存.js 文章provider-mon
string - 文章 "Matching"算法
我的问题比较具体，至少对我来说是这样。具体是因为在做了很多搜索之后我找不到任何有用的东西。因此，正如标题所说，我正在寻找一种算法，它会发现输入中给出的两篇文章是否“匹配”，但不是通常的字符串匹配意义上
algorithm - 理解动态规划的好例子、文章、书籍
关闭。这个问题是off-topic .它目前不接受答案。 9年前关闭。锁定。这个问题及其答案是locked因为这个问题是题外话，但具有历史意义。它目前不接受新的答案或互动。我无法弄清楚动态编程的原
css - 如何在两栏中 float 文章？
我有这个问题。我正在建立一个社交网站，我必须在两栏中创建帖子。父容器是一个部分，元素“post”是样式为 float: left 的文章。我如何让滑到那些较短的下方创建的空白空间的帖子？最佳答案 c
PHP - 从文件或数据库获取 HTML 文章？
这里有几个关于文件与数据库的问题，但我仍然不确定使用什么以及为什么在我的案例中应该使用它。我的网站上有很多 HTML 文章(长度在几百到几千字之间)。在数据库 (MySQL) 中，我有一个没有搜索索
文章《SemanticKernel--LangChain的替代品？》的错误和疑问探讨
微信公众号文章 Semantic Kernel —— LangChain 的替代品? [1] ，它使用的示例代码是Python ，他却发了这么一个疑问：支持的语言对比（因为 Sem
javascript - Polymer 中的循环 WordPress 文章
我想编写一个 polymer 元素来显示一些 WordPress 文章。 http://www.jsv-lippstadt.de/?json=get_category_posts&slug=app

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 文章网格没有一直延伸到边缘