深入理解HTML noresize 属性：为何框架仍随浏览器窗口调整大小？-html教程-PHP中文网

深入理解HTML noresize 属性：为何框架仍随浏览器窗口调整大小？

碧海醫心

发布： 2025-12-04 10:32:14

原创

872人浏览过

深入理解HTML noresize 属性：为何框架仍随浏览器窗口调整大小？

html `` 元素的 `noresize` 属性旨在阻止用户通过拖动边框来手动调整框架大小。然而，如果框架的尺寸由其父级 `

` 的 `cols` 或 `rows` 属性以相对单位（如 `*` 或百分比）定义，框架仍会随着浏览器窗口的尺寸变化而动态调整。直接在 `` 元素上设置 `style` 属性中的 `height` 或 `width` 对其布局尺寸无效。

在HTML早期，frameset 和 frame 元素被广泛用于将浏览器窗口分割成多个独立的、可滚动的区域。其中，noresize 属性是一个经常引起误解的特性。本教程将详细解释 noresize 的实际作用，以及为何即使设置了该属性，框架有时仍然会随着浏览器窗口的尺寸变化而调整。

noresize 属性的真正作用

noresize 属性的作用是阻止用户通过鼠标拖动框架之间的分隔线来改变框架的尺寸。当一个 frame 元素设置了 noresize 属性后，浏览器将不会在框架边框处提供可拖动的用户界面。这对于需要固定布局以保持内容完整性或特定交互设计的场景非常有用。

例如，以下代码片段展示了 noresize 的用法：

<!DOCTYPE html>
<html>
<head>
<title>Frameset with noresize</title>
</head>
<frameset cols="200,*,*">
  <frame src="left.html" name="leftFrame" noresize="noresize" />
  <frame src="middle.html" name="middleFrame" />
  <frame src="right.html" name="rightFrame" />
</frameset>
</html>

登录后复制

在这个例子中，左侧的 leftFrame 将不允许用户手动调整其宽度。

立即学习“前端免费学习笔记（深入）”；

框架尺寸动态调整的机制

尽管 noresize 属性阻止了用户手动调整，但框架仍然可能随着浏览器窗口的尺寸变化而自动调整。这主要是因为框架的布局是由其父级 <frameset> 元素决定的，而不是由单个 <frame> 元素。

<frameset> 元素使用 cols (列) 或 rows (行) 属性来定义其子框架的尺寸。这些属性的值可以是：

像素值 (px)：例如 cols="200,*,*"，表示第一列固定为200像素。
百分比 (%)：例如 cols="25%,50%,25%"，表示各列占据总宽度的相应百分比。
*相对值 ()*：例如 `cols=",2,"，表示按比例分配剩余空间。表示一个单位，2` 表示两个单位。

当 frameset 的 cols 或 rows 属性使用百分比或相对值（*）时，框架的实际尺寸会根据浏览器窗口的可用空间动态计算。这意味着，即使 noresize 阻止了用户拖动，框架的尺寸仍然会响应浏览器窗口的缩放而自动调整，以维持其在 frameset 中定义的相对比例。

阿贝智能

阿贝智能是基于AI技术辅助创作儿童绘本、睡前故事和有声书的平台，助你创意实现、梦想成真。

查看详情

在原始问题中，<frameset cols="*,*,*"> 定义了三个框架，每个都占据可用宽度的三分之一。因此，当浏览器窗口宽度改变时，每个框架的宽度都会相应地调整，以保持这个三分之一的比例。

style 属性对 frame 元素尺寸的无效性

一个常见的误解是尝试通过在 <frame> 元素上设置内联 style 属性（如 height 或 width）来控制其尺寸。然而，这种做法对 <frameset> 布局下的 frame 元素是无效的。

例如，以下代码中的 style 属性将不起作用：

<frameset cols="*,*,*">
  <frame
    src="bianca.html"
    noresize="noresize"
    style="height: 800px; width:400px"
  >
  <frame src="second.html" >
  <frame src="second.html">
</frameset>

登录后复制

<frame> 元素的尺寸完全由其父级 <frameset> 的 cols 或 rows 属性控制。内联 style 属性中的 width 和 height 声明会被 frameset 的布局机制覆盖。如果你需要固定某个框架的尺寸，应该在 <frameset> 的 cols 或 rows 属性中使用像素值来定义。

noresize 与 iframe 的区别

值得注意的是，noresize 属性是 <frame> 元素特有的，它用于传统的 <frameset> 结构。现代网页设计中，<frameset> 和 <frame> 元素已被废弃，取而代之的是 <iframe> 元素。

总结

noresize 属性：阻止用户通过鼠标拖动来手动调整 <frame> 的边框。
框架尺寸的决定因素：<frame> 的实际尺寸由其父级 <frameset> 的 cols 或 rows 属性决定。
动态调整的原因：如果 frameset 使用百分比或相对值（*）定义框架尺寸，则框架会随着浏览器窗口的尺寸变化而动态调整，即使设置了 noresize。
style 属性的无效性：在 <frame> 元素上直接设置 style="width: ...; height: ...;" 对其布局尺寸无效，因为这些尺寸由 frameset 统一管理。
现代替代方案：frameset 和 frame 已被废弃，现代网页开发应使用 <iframe> 结合 CSS 来实现类似功能。

理解 noresize 的真正作用和 <frameset> 的布局机制，有助于开发者避免在HTML早期布局中可能遇到的困惑。虽然这些技术已不推荐用于新项目，但了解其工作原理对于维护旧系统或理解历史网页技术仍然有价值。

以上就是深入理解HTML noresize 属性：为何框架仍随浏览器窗口调整大小？的详细内容，更多请关注php中文网其它相关文章！