-1

我在跟踪包含大表（小提琴中的绿色 div）的 div 的问题时遇到问题。我希望这个 div 有一个工作overflow-x: auto。

在firefox上我没有看到任何问题，当窗口太少时，表格容器会添加一个滚动条，使用chrome或opera时，浏览器滚动条会显示在块滚动条旁边，并且页面内容会延伸到窗口长度。

如果我不使用 Grid，所有浏览器都会显示相同的行为，滚动条仅在表的父块中。

这是一个小提琴和片段：

.content {
  grid-area: content;
  display: block;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  min-height: calc(100vh - 6em);
  overflow: hidden;
}

.footer {
  grid-area: footer;
  height: 3em;
  background-color: grey;
}

.sidemenu {
  height: 3em;
  grid-area: sidemenu;
  background-color: grey;
 }

.wrapper {
  display: grid;
  grid-template-areas:
    "sidemenu"
    "content"
    "footer";
}

.big {
  background-color: green;
  width: 2980px;
  height: 20px;
}
.blockWrapper { overflow-x: auto; }

@media (min-width: 500px) {
  .wrapper {
    grid-template-columns: 3em 1fr;
    grid-template-areas:
      "sidemenu content"
      "sidemenu footer";
  }
  .sidemenu { height: 100%; }
}
<div class="wrapper">
  <div class="sidemenu"></div>
  <div class="content">
    <div class="blockWrapper">
      <div class="big"></div>
    </div>
  </div>
  <div class="footer"></div>
</div>

4

1 回答 1

1

您可以删除width: 100%并margin: 0 auto继续.content在 Chrome 和 Firefox 中获得相同的行为 - 请参见下面的演示：

.content {
  grid-area: content;
  display: block;
  max-width: 1200px;
  /*margin: 0 auto;
  width: 100%;*/
  box-sizing: border-box;
  min-height: calc(100vh - 6em);
  overflow: hidden;
}

.footer {
  grid-area: footer;
  height: 3em;
  background-color: grey;
}

.sidemenu {
  height: 3em;
  grid-area: sidemenu;
  background-color: grey;
}

.wrapper {
  display: grid;
  grid-template-areas: "sidemenu" "content" "footer";
}

.big {
  background-color: green;
  width: 2980px;
  height: 20px;
}

.blockWrapper {
  overflow-x: auto;
}

@media (min-width: 500px) {
  .wrapper {
    grid-template-columns: 3em 1fr;
    grid-template-areas: "sidemenu content" "sidemenu footer";
  }
  .sidemenu {
    height: 100%;
  }
}
<div class="wrapper">
  <div class="sidemenu"></div>
  <div class="content">
    <div class="blockWrapper">
      <div class="big"></div>
    </div>
  </div>
  <div class="footer"></div>
</div>

另一个解决方法是为500px 以上的媒体查询指定grid-template-columns: 100%和- 请参见下面的演示：grid-template-columns: 3em calc(100% - 3em)

.content {
  grid-area: content;
  display: block;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  min-height: calc(100vh - 6em);
  overflow: hidden;
}

.footer {
  grid-area: footer;
  height: 3em;
  background-color: grey;
}

.sidemenu {
  height: 3em;
  grid-area: sidemenu;
  background-color: grey;
}

.wrapper {
  display: grid;
  grid-template-areas: "sidemenu" "content" "footer";
  grid-template-columns: 100%; /* added */
}

.big {
  background-color: green;
  width: 2980px;
  height: 20px;
}

.blockWrapper {
  overflow-x: auto;
}

@media (min-width: 500px) {
  .wrapper {
    grid-template-columns: 3em 1fr;
    grid-template-areas: "sidemenu content" "sidemenu footer";
    grid-template-columns: 3em calc(100% - 3em); /* added */
  }
  .sidemenu {
    height: 100%;
  }
}
<div class="wrapper">
  <div class="sidemenu"></div>
  <div class="content">
    <div class="blockWrapper">
      <div class="big"></div>
    </div>
  </div>
  <div class="footer"></div>
</div>

于 2019-04-29T14:29:19.040 回答