是否可以在 HTML `body` 元素上使用`resize` CSS 属性？答案

【问题标题】：Is it possible to use the `resize` CSS property on the HTML `body` element?是否可以在 HTML `body` 元素上使用`resize` CSS 属性？
【发布时间】：2021-07-01 23:09:37
【问题描述】：

My website 有一个固定的max-width，我想改进它，让用户在侧面也有一个可拖动的边框，这样她就可以在任何她想要的宽度上阅读。大多数在线推荐似乎都经过了一些 - 可怕的 - 与 JS 混为一谈来获得这种简单的效果；谢天谢地，现在 CSS 现在似乎默认具有此功能。但是，我似乎无法使其适用于 body 元素。是我做错了还是body 就是收不到这个属性？

下面的例子希望是最小的，如果有任何错误，请指出：

body {
  /* Preparation of the example design */
  padding-left: 20px;
  padding-right: 20px;
  max-width: 90vw;

  /* Resize Properties */
  resize: both;
  overflow: hidden; /* this depends on what you want to experiment with */
  border: 1px solid green;
}

<html>
  <body>
    <p>This is a very long text
 al;djf;alskdjf;laskdjf;asldkjf;alsdkjfl;asdjf;lasdkjf;lasdjf;lasjdfl;asjdl;fajsdl;fja;ldfjl;jadf</p>
  </body>
</html>

【问题讨论】：

标签： html css

【解决方案1】：

您需要将overflow 设置为html 以禁用溢出传播：

body {
  /* Preparation of the example design */
  padding-left: 20px;
  padding-right: 20px;
  max-width: 90vw;

  /* Resize Properties */
  resize: both;
  overflow: hidden; /* this depends on what you want to experiment with */
  border: 1px solid green;
}

html {
  overflow: auto; /* anything different from visible */
}

<html>
  <body>
    <p>This is a very long text
 al;djf;alskdjf;laskdjf;asldkjf;alsdkjfl;asdjf;lasdkjf;lasdjf;lasjdfl;asjdl;fajsdl;fja;ldfjl;jadf</p>
  </body>
</html>

UA 必须将根元素上设置的overflow-* 值应用于视口。但是，当根元素是一个 [HTML] html 元素（包括 HTML 的 XML 语法），其溢出值是可见的（在两个轴上），并且该元素有一个 body 元素作为子元素时，用户代理必须改为应用 @987654330 @ 视口中第一个此类子元素的值。然后，传播该值的元素必须具有可见的已用溢出值。 ^ref

【讨论】：

酷，您的答案似乎确实适用于 SO 中的 sn-p 运行。但是，我可以问你一些额外的东西吗？我正在尝试将其合并到我的网站中，但它似乎不起作用。我只是添加了resize 和overflow，但它似乎不起作用。也许我的例子没有它应该的那么小。
@PhilippeFanaro 您是否将溢出添加到 html 中？可能是缓存问题？
是的，我还添加了overflow 到html。我认为这不是缓存问题，我在重新运行所有内容时尝试了至少 2 个浏览器 —它也不再允许使用鼠标滚轮滚动页面。如果您愿意检查一下the CSS :[] 。我也尝试过自动化构建过程，我通常使用bash tools/build_watch.sh 来运行和构建所有内容。无论如何，到目前为止，谢谢。
@PhilippeFanaro 我正在查看该站点：fanaro.io，但我没有看到溢出应用于 html 元素
@PhilippeFanaro 您必须为此考虑 JS 或一些插件。对此没有原生且强大的 CSS 解决方案