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

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

why the lower right white space is not filled by red

问题

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

  1. <header class="header">
  2.   HEADER
  3. </header>
  5. <div class="content">
  6.   CONTENT
  7. </div>
  9. <section class="text">
  10.   TEXT
  11. </section>
  13. <footer class="footer">
  14.   FOOTER
  15. </footer>
  1. .container {
  2.   height: 100vh;
  3.   display: grid;
  4.   grid-template-columns: [header-start content-start footer-start] 4fr [content-end footer-end section-start] 1fr [header-end section-end];
  5.   grid-template-rows: [header-start] 1fr [hrader-end content-start] 3fr [content-end footer-start] 1fr [footer-end];
  6.   gap: 10px;
  7.   padding: 10px;
  8. }
  10. header {
  11.   grid-column: header-start / header-end;
  12.   background-color: blanchedalmond;
  13. }
  15. .content {
  16.   grid-column: content-start / content-end;
  17.   background-color: skyblue;
  18. }
  20. section {
  21.   grid-column: section-start / section-end;
  22.   background-color: coral;
  23. }
  25. footer {
  26.   grid-column: footer-start / footer-end;
  27.   background-color: lightseagreen;
  28. }
  30. /*居中*/
  31. .content,
  32. header,
  33. section,
  34. footer {
  35.   display: flex;
  36.   justify-content: center;
  37.   align-items: center;
  38. }
英文:

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

  1. * {
  2.   box-sizing: border-box;
  3.   margin: 0;
  4.   padding: 0;
  5. }
  7. .container {
  8.   height: 100vh;
  9.   display: grid;
  10.   grid-template-columns: [header-start content-start footer-start] 4fr [content-end footer-end section-start] 1fr [header-end section-end];
  11.   grid-template-rows: [header-start] 1fr [hrader-end content-start] 3fr [content-end footer-start] 1fr [footer-end];
  12.   gap: 10px;
  13.   padding: 10px;
  14. }
  16. header {
  17.   grid-column: header-start / header-end;
  18.   background-color: blanchedalmond;
  19. }
  21. .content {
  22.   grid-column: content-start / content-end;
  23.   background-color: skyblue;
  24. }
  26. section {
  27.   grid-column: section-start / section-end;
  28.   background-color: coral;
  29. }
  31. footer {
  32.   grid-column: footer-start / footer-end;
  33.   background-color: lightseagreen;
  34. }
  37. /*centering*/
  38. .content,
  39. header,
  40. section,
  41. footer {
  42.   display: flex;
  43.   justify-content: center;
  44.   align-items: center;
  45. }

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

  1. &lt;html lang=&quot;en&quot;&gt;
  3. &lt;head&gt;
  4.   &lt;meta charset=&quot;UTF-8&quot;&gt;
  5.   &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  6.   &lt;link rel=&quot;stylesheet&quot; href=&quot;grid2.css&quot;&gt;
  7.   &lt;title&gt;grid-line&lt;/title&gt;
  8. &lt;/head&gt;
  10. &lt;body&gt;
  11.   &lt;div class=&quot;container&quot;&gt;
  12.     &lt;header class=&quot;header&quot;&gt;
  13.       HEADER
  14.     &lt;/header&gt;
  16.     &lt;div class=&quot;content&quot;&gt;
  17.       CONTENT
  18.     &lt;/div&gt;
  20.     &lt;section class=&quot;text&quot;&gt;
  21.       TEXT
  22.     &lt;/section&gt;
  24.     &lt;footer class=&quot;footer&quot;&gt;
  25.       FOOTER
  26.     &lt;/footer&gt;
  27.   &lt;/div&gt;
  28. &lt;/body&gt;
  30. &lt;/html&gt;

<!-- end snippet -->

答案1

得分: 1

Sure, here is the translated content:

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

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

  1. * {
  2.   box-sizing: border-box;
  3.   margin: 0;
  4.   padding: 0;
  5. }
  7. .container {
  8.   height: 100vh;
  9.   display: grid;
  10.   grid-template-columns: [header-start content-start footer-start] 4fr [content-end footer-end section-start] 1fr [header-end section-end];
  11.   grid-template-rows: [header-start] 1fr [hrader-end content-start] 3fr [content-end footer-start] 1fr [footer-end];
  12.   gap: 10px;
  13.   padding: 10px;
  14. }
  16. header {
  17.   grid-column: header-start / header-end;
  18.   background-color: blanchedalmond;
  19. }
  21. .content {
  22.   grid-column: content-start / content-end;
  23.   background-color: skyblue;
  24. }
  26. section {
  27.   grid-column: section-start / section-end;
  28.   grid-row-end: span 2;  /* &lt;----  添加这部分 */
  29.   background-color: coral;
  30. }
  32. footer {
  33.   grid-column: footer-start / footer-end;
  34.   background-color: lightseagreen;
  35. }
  36. /*居中*/
  37. .content,
  38. header,
  39. section,
  40. footer {
  41.   display: flex;
  42.   justify-content: center;
  43.   align-items: center;
  44. }
  1. <div class="container">
  2.   <header class="header">
  3.     HEADER
  4.   </header>
  6.   <div class="content">
  7.     CONTENT
  8.   </div>
  10.   <section class="text">
  11.     TEXT
  12.   </section>
  14.   <footer class="footer">
  15.     FOOTER
  16.   </footer>
  17. </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 -->

  1. * {
  2.   box-sizing: border-box;
  3.   margin: 0;
  4.   padding: 0;
  5. }
  7. .container {
  8.   height: 100vh;
  9.   display: grid;
  10.   grid-template-columns: [header-start content-start footer-start] 4fr [content-end footer-end section-start] 1fr [header-end section-end];
  11.   grid-template-rows: [header-start] 1fr [hrader-end content-start] 3fr [content-end footer-start] 1fr [footer-end];
  12.   gap: 10px;
  13.   padding: 10px;
  14. }
  16. header {
  17.   grid-column: header-start / header-end;
  18.   background-color: blanchedalmond;
  19. }
  21. .content {
  22.   grid-column: content-start / content-end;
  23.   background-color: skyblue;
  24. }
  26. section {
  27.   grid-column: section-start / section-end;
  28.   grid-row-end: span 2;  /* &lt;----  ADD THIS PART */
  29.   background-color: coral;
  30. }
  32. footer {
  33.   grid-column: footer-start / footer-end;
  34.   background-color: lightseagreen;
  35. }
  36. /*centering*/
  37. .content,
  38. header,
  39. section,
  40. footer {
  41.   display: flex;
  42.   justify-content: center;
  43.   align-items: center;
  44. }

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

  1. &lt;div class=&quot;container&quot;&gt;
  2.   &lt;header class=&quot;header&quot;&gt;
  3.     HEADER
  4.   &lt;/header&gt;
  6.   &lt;div class=&quot;content&quot;&gt;
  7.     CONTENT
  8.   &lt;/div&gt;
  10.   &lt;section class=&quot;text&quot;&gt;
  11.     TEXT
  12.   &lt;/section&gt;
  14.   &lt;footer class=&quot;footer&quot;&gt;
  15.     FOOTER
  16.   &lt;/footer&gt;
  17. &lt;/div&gt;

<!-- end snippet -->

答案2

得分: 0

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

第一部分：

  1. 这是布局：
  2.     &lt;html lang=&quot;en&quot;&gt;
  3.     
  4.     &lt;head&gt;
  5.       &lt;meta charset=&quot;UTF-8&quot;&gt;
  6.       &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  7.       &lt;link rel=&quot;stylesheet&quot; href=&quot;grid2.css&quot;&gt;
  8.       &lt;title&gt;grid-line&lt;/title&gt;
  9.       &lt;style&gt;
  10.         * {
  11.       box-sizing: border-box;
  12.       margin: 0;
  13.       padding: 0;
  14.     }
  15.     
  16.     .container {
  17.       height: 100vh;
  18.       display: grid;
  19.       grid-template-columns:repeat(1, 1fr, 150px);
  20.       grid-template-rows:repeat(3, 200px, 200px, 200px);
  21.       grid-template-areas:
  22.       &quot;header header header header&quot;
  23.       &quot;content content content section&quot;
  24.       &quot;content content content section&quot;
  25.       &quot;footer footer footer footer&quot;;
  26.       gap: 10px;
  27.       padding: 10px;
  28.     }
  29.     
  30.     header {
  31.       grid-area:header;
  32.       background-color: blanchedalmond;
  33.     }
  34.     
  35.     .content {
  36.       grid-area:content;
  37.       background-color: skyblue;
  38.     }
  39.     
  40.     section {
  41.       grid-area:section;
  42.       background-color: coral;
  43.     }
  44.     
  45.     footer {
  46.       grid-area:footer;
  47.       background-color: lightseagreen;
  48.     }
  49.     
  50.     
  51.     /*居中*/
  52.     .content,
  53.     header,
  54.     section,
  55.     footer {
  56.       display: flex;
  57.       justify-content: center;
  58.       align-items: center;
  59.     }
  60.       &lt;/style&gt;
  61.     &lt;/head&gt;
  62.     
  63.     &lt;body&gt;
  64.       &lt;div class=&quot;container&quot;&gt;
  65.         &lt;header class=&quot;header&quot;&gt;
  66.           HEADER
  67.         &lt;/header&gt;
  68.     
  69.         &lt;div class=&quot;content&quot;&gt;
  70.           CONTENT
  71.         &lt;/div&gt;
  72.     
  73.         &lt;section class=&quot;text&quot;&gt;
  74.           TEXT
  75.         &lt;/section&gt;
  76.     
  77.         &lt;footer class=&quot;footer&quot;&gt;
  78.           FOOTER
  79.         &lt;/footer&gt;
  80.       &lt;/div&gt;
  81.     &lt;/body&gt;
  82.     
  83.     &lt;/html&gt;

第二部分：

  1. 这是我认为你期望的方式，以防万一，在这种情况下，section 出现在 content 旁边：
  2.     &lt;html lang=&quot;en&quot;&gt;
  3.     
  4.     &lt;head&gt;
  5.       &lt;meta charset=&quot;UTF-8&quot;&gt;
  6.       &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  7.       &lt;link rel=&quot;stylesheet&quot; href=&quot;grid2.css&quot;&gt;
  8.       &lt;title&gt;grid-line&lt;/title&gt;
  9.       &lt;style&gt;
  10.         * {
  11.       box-sizing: border-box;
  12.       margin: 0;
  13.       padding: 0;
  14.     }
  15.     
  16.     .container {
  17.       height: 100vh;
  18.       display: grid;
  19.       grid-template-columns:repeat(1, 1fr, 150px);
  20.       grid-template-rows:repeat(3, 200px, 200px, 200px);
  21.       grid-template-areas:
  22.       &quot;header header header header&quot;
  23.       &quot;content content content section&quot;
  24.       &quot;content content content section&quot;
  25.       &quot;footer footer footer section&quot;;
  26.       gap: 10px;
  27.       padding: 10px;
  28.     }
  29.     
  30.     header {
  31.       grid-area:header;
  32.       background-color: blanchedalmond;
  33.     }
  34.     
  35.     .content {
  36.       grid-area:content;
  37.       background-color: skyblue;
  38.     }
  39.     
  40.     section {
  41.       grid-area:section;
  42.       background-color: coral;
  43.     }
  44.     
  45.     footer {
  46.       grid-area:footer;
  47.       background-color: lightseagreen;
  48.     }
  49.     
  50.     
  51.     /*居中*/
  52.     .content,
  53.     header,
  54.     section,
  55.     footer {
  56.       display: flex;
  57.       justify-content: center;
  58.       align-items: center;
  59.     }
  60.       &lt;/style&gt;
  61.     &lt;/head&gt;
  62.     
  63.     &lt;body&gt;
  64.       &lt;div class=&quot;container&quot;&gt;
  65.         &lt;header class=&quot;header&quot;&gt;
  66.           HEADER
  67.         &lt;/header&gt;
  68.     
  69.         &lt;div class=&quot;content&quot;&gt;
  70.           CONTENT
  71.         &lt;/div&gt;
  72.     
  73.         &lt;section class=&quot;text&quot;&gt;
  74.           TEXT
  75.         &lt;/section&gt;
  76.     
  77.         &lt;footer class=&quot;footer&quot;&gt;
  78.           FOOTER
  79.         &lt;/footer&gt;
  80.       &lt;/div&gt;
  81.     &lt;/body&gt;
  82.     
  83.     &lt;/html&gt;

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

英文:

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

  1. &lt;head&gt;
  2.   &lt;meta charset=&quot;UTF-8&quot;&gt;
  3.   &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  4.   &lt;link rel=&quot;stylesheet&quot; href=&quot;grid2.css&quot;&gt;
  5.   &lt;title&gt;grid-line&lt;/title&gt;
  6.   &lt;style&gt;
  7.     * {
  8.   box-sizing: border-box;
  9.   margin: 0;
  10.   padding: 0;
  11. }
  13. .container {
  14.   height: 100vh;
  15.   display: grid;
  16.   grid-template-columns:repeat(1, 1fr, 150px);
  17.   grid-template-rows:repeat(3, 200px, 200px, 200px);
  18.   grid-template-areas:
  19.   &quot;header header header header&quot;
  20.   &quot;content content content section&quot;
  21.   &quot;content content content section&quot;
  22.   &quot;footer footer footer footer&quot;;
  23.   gap: 10px;
  24.   padding: 10px;
  25. }
  27. header {
  28.   grid-area:header;
  29.   background-color: blanchedalmond;
  30. }
  32. .content {
  33.   grid-area:content;
  34.   background-color: skyblue;
  35. }
  37. section {
  38.   grid-area:section;
  39.   background-color: coral;
  40. }
  42. footer {
  43.   grid-area:footer;
  44.   background-color: lightseagreen;
  45. }
  48. /*centering*/
  49. .content,
  50. header,
  51. section,
  52. footer {
  53.   display: flex;
  54.   justify-content: center;
  55.   align-items: center;
  56. }
  57.   &lt;/style&gt;
  58. &lt;/head&gt;
  60. &lt;body&gt;
  61.   &lt;div class=&quot;container&quot;&gt;
  62.     &lt;header class=&quot;header&quot;&gt;
  63.       HEADER
  64.     &lt;/header&gt;
  66.     &lt;div class=&quot;content&quot;&gt;
  67.       CONTENT
  68.     &lt;/div&gt;
  70.     &lt;section class=&quot;text&quot;&gt;
  71.       TEXT
  72.     &lt;/section&gt;
  74.     &lt;footer class=&quot;footer&quot;&gt;
  75.       FOOTER
  76.     &lt;/footer&gt;
  77.   &lt;/div&gt;
  78. &lt;/body&gt;
  80. &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">

  1. &lt;head&gt;
  2.   &lt;meta charset=&quot;UTF-8&quot;&gt;
  3.   &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  4.   &lt;link rel=&quot;stylesheet&quot; href=&quot;grid2.css&quot;&gt;
  5.   &lt;title&gt;grid-line&lt;/title&gt;
  6.   &lt;style&gt;
  7.     * {
  8.   box-sizing: border-box;
  9.   margin: 0;
  10.   padding: 0;
  11. }
  13. .container {
  14.   height: 100vh;
  15.   display: grid;
  16.   grid-template-columns:repeat(1, 1fr, 150px);
  17.   grid-template-rows:repeat(3, 200px, 200px, 200px);
  18.   grid-template-areas:
  19.   &quot;header header header header&quot;
  20.   &quot;content content content section&quot;
  21.   &quot;content content content section&quot;
  22.   &quot;footer footer footer section&quot;;
  23.   gap: 10px;
  24.   padding: 10px;
  25. }
  27. header {
  28.   grid-area:header;
  29.   background-color: blanchedalmond;
  30. }
  32. .content {
  33.   grid-area:content;
  34.   background-color: skyblue;
  35. }
  37. section {
  38.   grid-area:section;
  39.   background-color: coral;
  40. }
  42. footer {
  43.   grid-area:footer;
  44.   background-color: lightseagreen;
  45. }
  48. /*centering*/
  49. .content,
  50. header,
  51. section,
  52. footer {
  53.   display: flex;
  54.   justify-content: center;
  55.   align-items: center;
  56. }
  57.   &lt;/style&gt;
  58. &lt;/head&gt;
  60. &lt;body&gt;
  61.   &lt;div class=&quot;container&quot;&gt;
  62.     &lt;header class=&quot;header&quot;&gt;
  63.       HEADER
  64.     &lt;/header&gt;
  66.     &lt;div class=&quot;content&quot;&gt;
  67.       CONTENT
  68.     &lt;/div&gt;
  70.     &lt;section class=&quot;text&quot;&gt;
  71.       TEXT
  72.     &lt;/section&gt;
  74.     &lt;footer class=&quot;footer&quot;&gt;
  75.       FOOTER
  76.     &lt;/footer&gt;
  77.   &lt;/div&gt;
  78. &lt;/body&gt;
  80. &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
  • css
  • frontend
  • grid
  • html
  • layout
匿名

发表评论

匿名网友

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

确定