CSS网格中的神秘间隙

问题描述 投票：2回答：3

在下面的代码段中，'main'区域的上方和下方均存在间隙，这些间隙假定是一个空单元格，其高度与网格单元格相同。在最底部也有一个空白区域。

我尝试将grid-auto-flow设置为不同的值，但是除了将其设置为column的最底间隙之外，没有任何效果。

是什么原因造成的？以及如何解决？ 

.header {
    grid-area: hd;
}
.footer {
    grid-area: ft;
}
.content {
    grid-area: main;
}
.sidebar {
    grid-area: sd;
}
* {box-sizing: border-box;}

.wrapper {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
    max-width: 940px;
    margin: 0 auto;
}

.wrapper > div {
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}
.wrapper {
    display: grid;
    
    grid-auto-rows: minmax(auto, auto);
    grid-template-areas: 
      "hd hd ft"
      "sd . ft"
      "sd main ft"
      "sd . ft";
}
<div class="wrapper">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
</div>
html css css-grid
3个回答
1
投票

这是正在发生的事情：

首先，让我们看一下差距（它们在很多情况下不会出现）：

enter image description here

.wrapper {
  display: grid;
  grid-auto-rows: minmax(auto, auto);
  grid-template-areas: "hd hd ft" "sd . ft" "sd main ft" "sd . ft";
}

.header {
  grid-area: hd;
}

.footer {
  grid-area: ft;
}

.content {
  grid-area: main;
}

.sidebar {
  grid-area: sd;
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  max-width: 940px;
  margin: 0 auto;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
<div class="wrapper">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
</div>

您所看到的是HTML代码中&nbsp;（non-breaking space）个字符的呈现。

enter image description here

作为空白字符，它们是不可见的，这使得它们很难被发现。但是一旦删除它们，布局就会按预期工作。

enter image description here

.wrapper {
  display: grid;
  grid-auto-rows: minmax(auto, auto);
  grid-template-areas: "hd hd ft" "sd . ft" "sd main ft" "sd . ft";
}

.header {
  grid-area: hd;
}

.footer {
  grid-area: ft;
}

.content {
  grid-area: main;
}

.sidebar {
  grid-area: sd;
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  max-width: 940px;
  margin: 0 auto;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
<div class="wrapper">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
</div>

最后，为什么在很多情况下不显示错误的布局？

[当您复制在网页上呈现的HTML代码时（例如，直接从问题中复制代码），已经呈现了&nbsp;字符，即HTML代码。因此，仅复制（可折叠的）空白空间，并且布局看起来可以正常工作。

[此外，如果您从某些浏览器中的某些代码编辑器（例如Edge上的Stack Snippet编辑器）复制HTML代码，则&nbsp;字符也不会被复制。我需要从Chrome中的jsFiddle编辑器复制代码，才能最终看到问题。

此外，如果您使用原始代码在编辑器中单击“整理”按钮，则会在各行之间添加空格。

1
投票

**我在Chrome和Firefox上测试了代码，结果是**

enter image description here

enter image description here

总是将<!DOCTYPE>声明添加到HTML文档中，以便浏览器知道期望的文档类型。

.header {
    grid-area: hd;
}
.footer {
    grid-area: ft;
}
.content {
    grid-area: main;
}
.sidebar {
    grid-area: sd;
}
* {box-sizing: border-box;}

.wrapper {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
    max-width: 940px;
    margin: 0 auto;
}

.wrapper > div {
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}
.wrapper {
    display: grid;
    
    grid-auto-rows: minmax(auto, auto);
    grid-template-areas: 
      "hd hd ft"
      "sd . ft"
      "sd main ft"
      "sd . ft";
}
<!DOCTYPE html>
<html>

  <head>
	
  </head>

<body>




<div class="wrapper">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
</div>
</body>
</html>
-1
投票

必须插入空单元格，默认情况下不会得到它，只需添加HTML和body标签即可解决底部间隙问题：

.header {
    grid-area: hd;
}
.footer {
    grid-area: ft;
}
.content {
    grid-area: main;
}
.sidebar {
    grid-area: sd;
}
.empty-cell1 {
    grid-area: ec1;
}
.empty-cell2 {
    grid-area: ec2;
}
* {box-sizing: border-box;}

.wrapper {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
    max-width: 940px;
    margin: 0 auto;
}

.wrapper > div {
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}
.wrapper {
    display: grid;
    grid-template-areas: 
      "hd hd ft"
      "sd ec1 ft"
      "sd main ft"
      "sd ec2 ft";
}
<!DOCTYPE html>
<html>

  <head>
	
  </head>

<body>




<div class="wrapper">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
    <div class="empty-cell1"></div>
    <div class="empty-cell2"></div>
</div>
</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.