HTML多Frameset布局问题：在现有框架外添加垂直侧边框架

To add left and right vertical frames alongside your main content, you’ll need to nest a frameset inside the bottom row of your existing structure. Here’s how to adjust your code properly:

Full Modified Code #

<!DOCTYPE HTML>
<html>
<head>
</head>
<!-- Outer frameset: splits page into header (10%) and main section (90%) -->
<frameset border="0" frameborder="0" rows="10%, 90%">
  <frame src="header.html" name="header" noresize="noresize">
  <!-- Nested frameset: splits main section into left, middle, right columns -->
  <frameset cols="15%, 70%, 15%" border="0" frameborder="0">
    <frame src="left-sidebar.html" name="leftSidebar" noresize="noresize">
    <frame src="home.html" name="mainContent">
    <frame src="right-sidebar.html" name="rightSidebar" noresize="noresize">
  </frameset>
</frameset>
<!-- Fallback for browsers that don't support frames -->
<noframes>
  <body>
    <p>This page uses frames, but your browser doesn't support them.</p>
  </body>
</noframes>
</html>

Key Changes Explained #

• Nested Frameset: Replaced the single bottom frame with a new frameset using the cols attribute. This splits the 90% height section into three vertical columns—tweak the percentage values (like 10%,80%,10%) to match your desired sidebar widths.
• Side Frame Sources: Added two new frames for left and right sidebars, each pointing to their respective HTML files. Update the src paths to match your actual sidebar file names/locations.
• Frame Naming: Gave each frame a unique name attribute so you can target them with links later (e.g., <a href="new-content.html" target="mainContent"> loads content directly in the main frame).
• Noresize Control: Added noresize to the sidebar frames to prevent users from dragging and resizing them—remove this attribute if you want resizable sidebars.
• Accessibility Fallback: Included a <noframes> section for browsers that don’t support frames, which is a best practice for broader compatibility.

Quick Note #

Frames are considered outdated in modern web development. If you’re starting a new project, consider using CSS Grid/Flexbox with server-side includes or client-side routing instead. But if you need to stick with frames for legacy reasons, this approach will work perfectly.

内容的提问来源于stack exchange，提问作者Kyle Hattan