Question

我的页面布局有两列：边栏和页面内容的其余部分。边栏需要为300px宽度，而其余内容需要填充剩余的内容。我为此和grid-template-columns: 300px auto使用了CSS网格（甚至尝试使用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网格做不同的操作来避免此问题？谢谢！

Answer 1

您始终可以通过更旧的浮动和设置宽度来使用, '{d}', data_type)函数。这肯定适用于所有类型的设备。

REPLACE(

calc

Answer 2

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

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

Answer 3

问题出在列宽固定为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/

在较小的屏幕上CSS网格无法拉伸到100％

3 个答案: