【CSS】固定页面-overflow属性

固定页面：

页面设计或是大屏展示时我们时常会遇到需要固定页面（不希望页面滚动）的情况。

/* 给需要的页面设置以下属性 */

height: 100vh; /* 高度撑满屏幕 */
overflow: hidden; /* 当元素内的内容超出了其容器的大小时，超出部分会被隐藏。 */

解释：

• overflow属性 用于设置一个元素的内容如果溢出其内容区（即元素的宽度和高度）时的处理方式。它可以取以下值：
  • visible：默认值。内容不会被裁剪，可能会溢出容器。
  • hidden：内容会被裁剪，并且不可见。
  • scroll：内容会被裁剪，并且浏览器会显示滚动条以便查看溢出的内容。
  • auto：如果内容溢出，浏览器会根据需要显示滚动条。

适用场景：

• 防止溢出内容干扰布局：隐藏多余的内容，避免破坏页面布局。
• 创建裁剪效果：仅显示部分内容，适用于图片裁剪或固定尺寸的内容显示区域。
• 提高用户体验：在一些情况下，隐藏滚动条和溢出内容可以简化界面，提高用户体验。