The segmentation method of the framework (rows, cols)

Frame Division Methods (rows, cols)

In HTML, page layout division primarily relies on the <frameset> element and its rows and cols attributes. Although this traditional method is gradually being replaced by modern CSS layouts, it can still be found in some legacy systems.

Vertical Division with the rows Attribute

The rows attribute defines vertical division proportions using comma-separated values. Each value represents the height of the corresponding frame and can be specified in pixels, percentages, or relative proportions (denoted by an asterisk).

<frameset rows="20%, 60%, 20%">
  <frame src="header.html">
  <frame src="content.html">
  <frame src="footer.html">
</frameset>

This example creates three horizontal frames:

• Top frame: 20% height
• Middle frame: 60% height
• Bottom frame: 20% height

Using an asterisk to allocate remaining space:

<frameset rows="100, *, 50">
  <frame src="toolbar.html">
  <frame src="main.html">
  <frame src="statusbar.html">
</frameset>

Here:

• Top fixed at 100 pixels
• Bottom fixed at 50 pixels
• Middle occupies all remaining space

Horizontal Division with the cols Attribute

The cols attribute controls horizontal division, with syntax identical to rows:

<frameset cols="150, *">
  <frame src="sidebar.html">
  <frame src="article.html">
</frameset>

A more complex nested example:

<frameset cols="25%, 75%">
  <frame src="menu.html">
  <frameset rows="30%, 70%">
    <frame src="header.html">
    <frame src="content.html">
  </frameset>
</frameset>

Combining rows and cols

Both attributes can be combined to create complex layouts:

<frameset rows="80, *" cols="200, *">
  <frame src="logo.html">
  <frame src="nav.html">
  <frame src="ads.html">
  <frame src="main.html">
</frameset>

This layout produces four areas:

1. Top-left (80px height, 200px width)
2. Top-right (80px height, remaining width)
3. Bottom-left (remaining height, 200px width)
4. Bottom-right (remaining space)

Frame Border Control

Adjust frame appearance using the frameborder and border attributes:

<frameset cols="30%, 70%" frameborder="0" border="0">
  <frame src="panel.html" noresize>
  <frame src="display.html">
</frameset>

Modern Alternatives

Although <frameset> is still supported by some browsers, CSS is recommended for similar layouts:

<div class="container">
  <header>Header</header>
  <aside>Sidebar</aside>
  <main>Main Content</main>
  <footer>Footer</footer>
</div>

<style>
.container {
  display: grid;
  grid-template-rows: 80px 1fr 50px;
  grid-template-columns: 200px 1fr;
  height: 100vh;
}
header {
  grid-column: 1 / 3;
}
footer {
  grid-column: 1 / 3;
}
</style>

Inter-Frame Communication

Traditional frames can access each other via the parent object:

<!-- frame1.html -->
<script>
function updateFrame2(text) {
  parent.frames[1].document.getElementById('output').innerText = text;
}
</script>

<!-- frame2.html -->
<div id="output">Waiting for data...</div>

Modern alternatives use postMessage:

// Sender
window.parent.postMessage({ type: 'update', data: 'New content' }, '*');

// Receiver
window.addEventListener('message', (event) => {
  if(event.data.type === 'update') {
    document.getElementById('display').textContent = event.data.data;
  }
});

Responsive Frame Layouts

Dynamically adjust frame sizes with JavaScript:

<frameset id="mainFrameset" cols="200, *">
  <frame src="nav.html">
  <frame src="content.html">
</frameset>

<script>
function adjustLayout() {
  const frameset = document.getElementById('mainFrameset');
  frameset.cols = window.innerWidth < 768 ? "0, *" : "200, *";
}
window.addEventListener('resize', adjustLayout);
</script>

Frame Nesting Depth Limit

Browsers typically limit frame nesting levels (usually up to 20 layers). Excessive nesting can cause performance issues:

<!-- Not recommended -->
<frameset cols="50%, 50%">
  <frameset rows="50%, 50%">
    <frameset cols="50%, 50%">
      <!-- More nesting... -->
    </frameset>
  </frameset>
</frameset>

Frames and SEO

Search engine crawlers struggle with frame content. Important content should avoid being placed in frames:

<noframes>
  Your browser does not support frames. Here is alternative content...
  <a href="no-frames-version.html">Visit the non-frame version</a>
</noframes>

Frame Security Restrictions

The same-origin policy affects inter-frame interactions. Cross-origin frame access is restricted:

// Only works when same-origin
try {
  const otherFrame = window.parent.frames[0];
  console.log(otherFrame.document.title);
} catch (e) {
  console.error('Cross-origin access denied');
}

Frame Printing Issues

Special handling is required when printing pages with frames:

<frameset rows="*, 0">
  <frame src="content.html">
  <frame src="print.css" media="print">
</frameset>

print.css content:

@media print {
  body {
    visibility: visible;
    position: static;
  }
}