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

huangapple go评论63阅读模式
英文:

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

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

* {
  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;
}

<!-- language: lang-html -->

&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;

<!-- end snippet -->

答案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.

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-css -->

* {
  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;
}

<!-- language: lang-html -->

&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;

<!-- end snippet -->

答案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.

huangapple
  • 本文由 发表于 2023年7月13日 14:35:39
  • 转载请务必保留本文链接:https://go.coder-hub.com/76676529.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定