CSS 网格在较小的屏幕上不会拉伸到 100%答案

【问题标题】：CSS grid doesn't stretch to 100% on smaller screensCSS 网格在较小的屏幕上不会拉伸到 100%
【发布时间】：2019-07-05 01:50:12
【问题描述】：

我有一个包含两列的页面布局：侧边栏和页面内容的其余部分。侧边栏需要 300px 宽度，而其余内容需要填充剩下的内容。我为此使用了 CSS 网格和 grid-template-columns: 300px auto（甚至尝试了 grid-template-columns: 300px 1fr）。它适用于更大的屏幕。但是在平板电脑大小的屏幕上，内容不会拉伸到 100% / 不会填满剩下的内容。而且我不确定出了什么问题。

这是我的代码大纲：

.container {
  display: grid;
  grid-template-columns: 300px auto;
}

.sidebar {
  height: 100vh;
  background: green;
}

.content {
  height: 100vh;
  background: gray;
}

<div class="container">
  <div class="sidebar"></div>
  <div class="content"></div>
</div>

有什么我做错了，有没有办法我可以用 CSS 网格做不同的事情来避免这个问题？谢谢！

【问题讨论】：

在您的容器之外是否还有其他可能影响行为的 HTML 内容或 CSS？例如。正文的边距。
@AndyG 是的，一堆 CSS，因为我在 WordPress 上做这个。但我不知道它到底是什么。
使用浏览器的开发者工具检查页面以发现网格右侧的内容。

标签： css css-grid

【解决方案1】：

问题来自固定在300px 的列宽。您可以使用媒体查询并在固定屏幕宽度及以下将grid-template-columns 分配给auto。例如，对于任何 600 像素或更小的屏幕尺寸，宽度会自动占据整个屏幕。

CSS

.container {
  display: grid;
  grid-template-columns: 300px auto;
}

.sidebar {
  height: 100vh;
  background: green;
}

.content {
  height: 100vh;
  background: gray;
}

@media only screen and (max-width: 600px) {
  .container {
    grid-template-columns: auto;
  }
}

https://jsfiddle.net/dxefc73o/

【讨论】：

这里没有说明原代码有什么问题。
问题是宽度原来是固定的。要解决此问题，请设置 max-width: 300px 和 width:100%。或者做上面的改变

【解决方案2】：

您始终可以使用calc 函数，通过较旧的浮动和设置宽度方式。这肯定适用于所有类型的设备。

.container {
  display: inline-block;
  width: 100%;
}

.sidebar {
  float: left;
  display: inline-block;
  max-width: 300px;
  width: 100%;
  height: 100vh;
  background: green;
}

.content {
  float: left;
  display: inline-block;
  width: calc(100% - 300px);
  height: 100vh;
  background: gray;
}

<div class="container">
  <div class="sidebar"></div>
  <div class="content"></div>
</div>

【讨论】：

【解决方案3】：

有点晚了，但我想你可以试试这个：

.container {
   display: grid;
   grid-template-columns: 300px minmax(0, 1fr);
}

【讨论】：