Question

我在左侧有一个固定的侧边栏（宽度：400像素），在右侧的内容应包含其余空间。使用fill-available时：边栏将其宽度更改为309px。

fill-available为什么不能正常工作？是否有可能在剩余空间中设置内容？

请在此处找到代码笔：https://codepen.io/ullaakut/pen/eQxbvY

谢谢！

Answer 1

填充可用???。生活中最大的谜团之一

您可以使用calc（边栏宽度的400px + padding = 480px）

body {
  display: flex;
  height: 100vh;
}

#sidebar {
  width: 400px;
  height: 100%;
}

#content {
   width: calc(100% - 480px);
}

/* Just style related CSS rules, deleting those does not fix the problem. This is just to make the codepen clearer. */

body {
  color: white;
  font-size: 14pt;
  margin: 0;
}

#sidebar {
  padding: 20px;
  background: #3c3c3c;
}

#content {
  padding: 20px;
  background: grey;
}

<body>
  <div id="sidebar">This should be exactly 400 pixels but it is 336.83px</div>
  <div id="content">This should fill the available space and not take space over the sidebar</div>
</body>

Answer 2

fill-avaible在不同的浏览器中具有不同的行为，但是如果您添加width: 100%，然后才能从不支持它的浏览器中使用它。

body {
  display: flex;
  height: 100vh;
}

#sidebar {
  width: 400px;
  height: 100%;
}

#content {
  width: 100%;
  width: -moz-available;
  width: -webkit-fill-available;
  width: fill-available;
}

/* Just style related CSS rules, deleting those does not fix the problem. This is just to make the codepen clearer. */

body {
  color: white;
  font-size: 14pt;
  margin: 0;
}

#sidebar {
  padding: 20px;
  background: #3c3c3c;
}

#content {
  padding: 20px;
  background: grey;
}

<body>
  <div id="sidebar">This should be exactly 400 pixels but it is 336.83px</div>
  <div id="content">This should fill the available space and not take space over the sidebar</div>
</body>

CSS-填充可用问题

2 个答案: