2023年7月13日 14:35:39go评论66阅读模式

英文:

why the lower right white space is not filled by red

问题

我试图使用grid中的命名线来进行布局，但它不像我希望的那样工作，我知道我错在哪里，因为红色部分不想紧挨着页脚。

<header class="header">
  HEADER
</header>

<div class="content">
  CONTENT
</div>

<section class="text">
  TEXT
</section>

<footer class="footer">
  FOOTER
</footer>

.container {
  height: 100vh;
  display: grid;
  grid-template-columns: [header-start content-start footer-start] 4fr [content-end footer-end section-start] 1fr [header-end section-end];
  grid-template-rows: [header-start] 1fr [hrader-end content-start] 3fr [content-end footer-start] 1fr [footer-end];
  gap: 10px;
  padding: 10px;
}

header {
  grid-column: header-start / header-end;
  background-color: blanchedalmond;
}

.content {
  grid-column: content-start / content-end;
  background-color: skyblue;
}

section {
  grid-column: section-start / section-end;
  background-color: coral;
}

footer {
  grid-column: footer-start / footer-end;
  background-color: lightseagreen;
}

/*居中*/
.content,
header,
section,
footer {
  display: flex;
  justify-content: center;
  align-items: center;
}

英文:

I'm trying to use named lines with grid to do the layout but it doesn't work for me as it should I know where I went wrong because the red section doesn't want to go next to the footer

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  height: 100vh;
  display: grid;
  grid-template-columns: [header-start content-start footer-start] 4fr [content-end footer-end section-start] 1fr [header-end section-end];
  grid-template-rows: [header-start] 1fr [hrader-end content-start] 3fr [content-end footer-start] 1fr [footer-end];
  gap: 10px;
  padding: 10px;
}

header {
  grid-column: header-start / header-end;
  background-color: blanchedalmond;
}

.content {
  grid-column: content-start / content-end;
  background-color: skyblue;
}

section {
  grid-column: section-start / section-end;
  background-color: coral;
}

footer {
  grid-column: footer-start / footer-end;
  background-color: lightseagreen;
}


/*centering*/
.content,
header,
section,
footer {
  display: flex;
  justify-content: center;
  align-items: center;
}

&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;grid2.css&quot;&gt;
  &lt;title&gt;grid-line&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;div class=&quot;container&quot;&gt;
    &lt;header class=&quot;header&quot;&gt;
      HEADER
    &lt;/header&gt;

    &lt;div class=&quot;content&quot;&gt;
      CONTENT
    &lt;/div&gt;

    &lt;section class=&quot;text&quot;&gt;
      TEXT
    &lt;/section&gt;

    &lt;footer class=&quot;footer&quot;&gt;
      FOOTER
    &lt;/footer&gt;
  &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;

答案1

得分: 1

Sure, here is the translated content:

在你的 section 中添加 grid-row-end: span 2;。

编辑： 我误解了问题，所以我编辑了代码片段。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  height: 100vh;
  display: grid;
  grid-template-columns: [header-start content-start footer-start] 4fr [content-end footer-end section-start] 1fr [header-end section-end];
  grid-template-rows: [header-start] 1fr [hrader-end content-start] 3fr [content-end footer-start] 1fr [footer-end];
  gap: 10px;
  padding: 10px;
}

header {
  grid-column: header-start / header-end;
  background-color: blanchedalmond;
}

.content {
  grid-column: content-start / content-end;
  background-color: skyblue;
}

section {
  grid-column: section-start / section-end;
  grid-row-end: span 2;  /* &lt;----  添加这部分 */
  background-color: coral;
}

footer {
  grid-column: footer-start / footer-end;
  background-color: lightseagreen;
}
/*居中*/
.content,
header,
section,
footer {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="container">
  <header class="header">
    HEADER
  </header>

  <div class="content">
    CONTENT
  </div>

  <section class="text">
    TEXT
  </section>

  <footer class="footer">
    FOOTER
  </footer>
</div>

I hope this helps! If you have any more translation requests or questions, feel free to ask.

英文:

Add grid-row-end: span 2; in your section

EDIT: I missunderstood the question, so I edit the snippet.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  height: 100vh;
  display: grid;
  grid-template-columns: [header-start content-start footer-start] 4fr [content-end footer-end section-start] 1fr [header-end section-end];
  grid-template-rows: [header-start] 1fr [hrader-end content-start] 3fr [content-end footer-start] 1fr [footer-end];
  gap: 10px;
  padding: 10px;
}

header {
  grid-column: header-start / header-end;
  background-color: blanchedalmond;
}

.content {
  grid-column: content-start / content-end;
  background-color: skyblue;
}

section {
  grid-column: section-start / section-end;
  grid-row-end: span 2;  /* &lt;----  ADD THIS PART */
  background-color: coral;
}

footer {
  grid-column: footer-start / footer-end;
  background-color: lightseagreen;
}
/*centering*/
.content,
header,
section,
footer {
  display: flex;
  justify-content: center;
  align-items: center;
}

&lt;div class=&quot;container&quot;&gt;
  &lt;header class=&quot;header&quot;&gt;
    HEADER
  &lt;/header&gt;

  &lt;div class=&quot;content&quot;&gt;
    CONTENT
  &lt;/div&gt;

  &lt;section class=&quot;text&quot;&gt;
    TEXT
  &lt;/section&gt;

  &lt;footer class=&quot;footer&quot;&gt;
    FOOTER
  &lt;/footer&gt;
&lt;/div&gt;

答案2

得分: 0

以下是翻译后的代码部分：

第一部分：

这是布局：
    &lt;html lang=&quot;en&quot;&gt;
    
    &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;grid2.css&quot;&gt;
      &lt;title&gt;grid-line&lt;/title&gt;
      &lt;style&gt;
        * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    .container {
      height: 100vh;
      display: grid;
      grid-template-columns:repeat(1, 1fr, 150px);
      grid-template-rows:repeat(3, 200px, 200px, 200px);
      grid-template-areas:
      &quot;header header header header&quot;
      &quot;content content content section&quot;
      &quot;content content content section&quot;
      &quot;footer footer footer footer&quot;;
      gap: 10px;
      padding: 10px;
    }
    
    header {
      grid-area:header;
      background-color: blanchedalmond;
    }
    
    .content {
      grid-area:content;
      background-color: skyblue;
    }
    
    section {
      grid-area:section;
      background-color: coral;
    }
    
    footer {
      grid-area:footer;
      background-color: lightseagreen;
    }
    
    
    /*居中*/
    .content,
    header,
    section,
    footer {
      display: flex;
      justify-content: center;
      align-items: center;
    }
      &lt;/style&gt;
    &lt;/head&gt;
    
    &lt;body&gt;
      &lt;div class=&quot;container&quot;&gt;
        &lt;header class=&quot;header&quot;&gt;
          HEADER
        &lt;/header&gt;
    
        &lt;div class=&quot;content&quot;&gt;
          CONTENT
        &lt;/div&gt;
    
        &lt;section class=&quot;text&quot;&gt;
          TEXT
        &lt;/section&gt;
    
        &lt;footer class=&quot;footer&quot;&gt;
          FOOTER
        &lt;/footer&gt;
      &lt;/div&gt;
    &lt;/body&gt;
    
    &lt;/html&gt;

第二部分：

这是我认为你期望的方式，以防万一，在这种情况下，section 出现在 content 旁边：
    &lt;html lang=&quot;en&quot;&gt;
    
    &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;grid2.css&quot;&gt;
      &lt;title&gt;grid-line&lt;/title&gt;
      &lt;style&gt;
        * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    .container {
      height: 100vh;
      display: grid;
      grid-template-columns:repeat(1, 1fr, 150px);
      grid-template-rows:repeat(3, 200px, 200px, 200px);
      grid-template-areas:
      &quot;header header header header&quot;
      &quot;content content content section&quot;
      &quot;content content content section&quot;
      &quot;footer footer footer section&quot;;
      gap: 10px;
      padding: 10px;
    }
    
    header {
      grid-area:header;
      background-color: blanchedalmond;
    }
    
    .content {
      grid-area:content;
      background-color: skyblue;
    }
    
    section {
      grid-area:section;
      background-color: coral;
    }
    
    footer {
      grid-area:footer;
      background-color: lightseagreen;
    }
    
    
    /*居中*/
    .content,
    header,
    section,
    footer {
      display: flex;
      justify-content: center;
      align-items: center;
    }
      &lt;/style&gt;
    &lt;/head&gt;
    
    &lt;body&gt;
      &lt;div class=&quot;container&quot;&gt;
        &lt;header class=&quot;header&quot;&gt;
          HEADER
        &lt;/header&gt;
    
        &lt;div class=&quot;content&quot;&gt;
          CONTENT
        &lt;/div&gt;
    
        &lt;section class=&quot;text&quot;&gt;
          TEXT
        &lt;/section&gt;
    
        &lt;footer class=&quot;footer&quot;&gt;
          FOOTER
        &lt;/footer&gt;
      &lt;/div&gt;
    &lt;/body&gt;
    
    &lt;/html&gt;

这是一种简化使用 display grid 属性的方式。

英文:

This is the layout:
<html lang="en">

&lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;grid2.css&quot;&gt;
  &lt;title&gt;grid-line&lt;/title&gt;
  &lt;style&gt;
    * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  height: 100vh;
  display: grid;
  grid-template-columns:repeat(1, 1fr, 150px);
  grid-template-rows:repeat(3, 200px, 200px, 200px);
  grid-template-areas:
  &quot;header header header header&quot;
  &quot;content content content section&quot;
  &quot;content content content section&quot;
  &quot;footer footer footer footer&quot;;
  gap: 10px;
  padding: 10px;
}

header {
  grid-area:header;
  background-color: blanchedalmond;
}

.content {
  grid-area:content;
  background-color: skyblue;
}

section {
  grid-area:section;
  background-color: coral;
}

footer {
  grid-area:footer;
  background-color: lightseagreen;
}


/*centering*/
.content,
header,
section,
footer {
  display: flex;
  justify-content: center;
  align-items: center;
}
  &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;div class=&quot;container&quot;&gt;
    &lt;header class=&quot;header&quot;&gt;
      HEADER
    &lt;/header&gt;

    &lt;div class=&quot;content&quot;&gt;
      CONTENT
    &lt;/div&gt;

    &lt;section class=&quot;text&quot;&gt;
      TEXT
    &lt;/section&gt;

    &lt;footer class=&quot;footer&quot;&gt;
      FOOTER
    &lt;/footer&gt;
  &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;

This is what I thought you were expecting, so just in case, in this one the section spawns next to the content:
<html lang="en">

&lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;grid2.css&quot;&gt;
  &lt;title&gt;grid-line&lt;/title&gt;
  &lt;style&gt;
    * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  height: 100vh;
  display: grid;
  grid-template-columns:repeat(1, 1fr, 150px);
  grid-template-rows:repeat(3, 200px, 200px, 200px);
  grid-template-areas:
  &quot;header header header header&quot;
  &quot;content content content section&quot;
  &quot;content content content section&quot;
  &quot;footer footer footer section&quot;;
  gap: 10px;
  padding: 10px;
}

header {
  grid-area:header;
  background-color: blanchedalmond;
}

.content {
  grid-area:content;
  background-color: skyblue;
}

section {
  grid-area:section;
  background-color: coral;
}

footer {
  grid-area:footer;
  background-color: lightseagreen;
}


/*centering*/
.content,
header,
section,
footer {
  display: flex;
  justify-content: center;
  align-items: center;
}
  &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;div class=&quot;container&quot;&gt;
    &lt;header class=&quot;header&quot;&gt;
      HEADER
    &lt;/header&gt;

    &lt;div class=&quot;content&quot;&gt;
      CONTENT
    &lt;/div&gt;

    &lt;section class=&quot;text&quot;&gt;
      TEXT
    &lt;/section&gt;

    &lt;footer class=&quot;footer&quot;&gt;
      FOOTER
    &lt;/footer&gt;
  &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;

This is a simplified way of using the display grid property.

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

为什么右下角的白色空白区域没有被填充为红色？

问题

答案1

答案2

如何在子网格中使用CSS @container查询？

在更新jquery-ui版本从1.12.1到1.13.2之前，我需要同时更新jquery版本吗？

如何修复幻灯片？

切换一个按钮控制多个div的显示与隐藏。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论