Атрибут cols тега <frameset> — поділ вікна на колонки
Атрибут cols визначає розмір і кількість стовпців в <frameset>.
Ширина кожного фрейму вказується в атрибуті cols в списку через кому (<frameset cols="30%, 30%, 40%, ...">).
Загальний опис
автор: NagarD
- Порада
-
Число значеннь атрибута cols визначає кількість стовпців в
автор: Wsewlad<frameset>.
Синтаксис
<frameset cols="pixels|%|*">Атрибут cols може отримувати 3 значень:
-
pixels -
Розмір стовпчика в пікселях (наприклад, "100px" або просто "100")
автор: NagarD -
% -
Розмір стовпчика в відсотках від загального обсягу простору (наприклад, "50%")
автор: NagarD -
* -
Вся інша частина вільного простору повинна бути призначена цьому стовпчику
автор: NagarD
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 3 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
Два записи cols і те саме, зроблене сучасною сіткою: замість зірочки — одиниця fr, решта без змін. Смуги живі — потягніть вікно вужче, і частки перерахуються так само, як колись перераховувалися фрейми. Числа під смугами — заміри з браузера на ширині 400 пікселів.
HTML
<p class="cap">1. <b>cols="25%,*,25%"</b> — точні відсотки по краях, зірочка
забирає решту:</p>
<pre class="code"><frameset cols="25%,*,25%"> → grid-template-columns: 25% 1fr 25%</pre>
<div class="grid g1">
<div class="cell c1">25%</div>
<div class="cell c2">* (1fr)</div>
<div class="cell c3">25%</div>
</div>
<p class="meas">Замір на вікні 400 px: 97 / 194 / 97 пікселів.</p>
<p class="cap">2. <b>cols="100,2*,*,20%"</b> — тут головне: зірочка це ЧАСТКА.
<b>2*</b> бере вдвічі більше, ніж <b>*</b>:</p>
<pre class="code"><frameset cols="100,2*,*,20%"> → grid-template-columns: 100px 2fr 1fr 20%</pre>
<div class="grid g2">
<div class="cell c1">100px</div>
<div class="cell c2">2* (2fr)</div>
<div class="cell c4">* (1fr)</div>
<div class="cell c3">20%</div>
</div>
<p class="meas">Замір на вікні 400 px: 100 / 137 / 68,5 / 76 пікселів —
між зірочками рівно два до одного.</p>
<p class="cap">3. І пастка, з якої починається більшість «білих сторінок»:</p>
<pre class="code bad"><frameset cols="25%,*">
<frame src="menu.html">
<frame src="text.html">
</frameset>
<body>
<p>цього абзацу в документі не буде взагалі</p>
</body></pre>CSS
.cap {
max-width: 620px;
margin: 22px 0 6px;
}
.code {
max-width: 620px;
margin: 0 0 10px;
padding: 10px 12px;
border-left: 6px solid #2f6fd0;
background: #f6f9ff;
font: 13px/1.5 ui-monospace, monospace;
overflow-x: auto;
}
.bad {
border-left-color: #d64545;
background: #fff4f4;
}
.grid {
display: grid;
gap: 4px;
max-width: 620px;
height: 70px;
padding: 4px;
border: 2px solid #b9c6d8;
border-radius: 4px;
background: #eef3fb;
}
.g1 {
grid-template-columns: 25% 1fr 25%;
}
.g2 {
grid-template-columns: 100px 2fr 1fr 20%;
}
.cell {
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
color: #12203a;
font: 600 13px/1.3 system-ui, sans-serif;
text-align: center;
overflow: hidden;
}
.c1 {
background: #f2b134;
}
.c2 {
background: #72b043;
}
.c3 {
background: #9fc0ea;
}
.c4 {
background: #b7dc94;
}
.meas {
max-width: 620px;
margin: 6px 0 0;
color: #5a6472;
font-size: .9em;
}cols="25%,*,25%" ділить вікно на три колонки: чверть, решта (зірочка) і ще чверть — межі між фреймами можна тягнути. Фрейми вилучено з HTML5: браузери їх ще рендерять, але в новому коді використовуй <iframe> чи звичайну верстку.
<!DOCTYPE html>
<html>
<frameset cols="25%,*,25%">
<frame src="data:text/html;charset=utf-8,%3Cbody style='background:%23eef6ff'%3E25%25%3C/body%3E">
<frame src="data:text/html;charset=utf-8,%3Cbody%3E%D1%81%D0%B5%D1%80%D0%B5%D0%B4%D0%B8%D0%BD%D0%B0 — *%3C/body%3E">
<frame src="data:text/html;charset=utf-8,%3Cbody style='background:%23ffef9e'%3E25%25%3C/body%3E">
</frameset>
</html>Різниця між HTML 4.01 та HTML5
Атрибут cols для тегу <frameset> не підтримується у HTML5.
Коментарі
Коментарів ще немає — будьте першим!