Атрибут height тега <iframe> — висота вбудованої рамки
автор: с3с
Загальний опис
автор: NagarD
Синтаксис
<iframe height="pixels">Атрибут height може отримувати єдине значення:
-
pixels -
Висота поточного фрейму у пікселях.
автор: с3с
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 3 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
Сім рамок з тим самим вмістом. Видно, що 200px і 200em означають те саме, що просто 200; що abc і від'ємне значення повертають типові 150px; що 50% працює по-різному залежно від того, чи має предок визначену висоту; і що правило в стилях перебиває атрибут. Остання рамка — сучасний запис через aspect-ratio.
HTML
<p class="head">1. Без height — типові 300×150</p>
<iframe srcdoc="<body style='margin:4px;background:aliceblue'>вміст</body>"></iframe>
<p class="head">2. height="200" · 3. height="200px" · 4. height="200em"</p>
<iframe width="150" height="200" srcdoc="<body style='margin:4px;background:aliceblue'>200</body>"></iframe>
<iframe width="150" height="200px" srcdoc="<body style='margin:4px;background:aliceblue'>200px</body>"></iframe>
<iframe width="150" height="200em" srcdoc="<body style='margin:4px;background:aliceblue'>200em</body>"></iframe>
<p class="head">5. height="abc" і height="-50" — обидві по 150px</p>
<iframe width="150" height="abc" srcdoc="<body style='margin:4px;background:seashell'>abc</body>"></iframe>
<iframe width="150" height="-50" srcdoc="<body style='margin:4px;background:seashell'>-50</body>"></iframe>
<p class="head">6. height="50%" у блоці заввишки 400px — виходить 200px</p>
<div class="korobka">
<iframe width="220" height="50%" srcdoc="<body style='margin:4px;background:honeydew'>50% від 400px</body>"></iframe>
</div>
<p class="head">7. Той самий height="50%" просто в тілі — знову 150px</p>
<iframe width="220" height="50%" srcdoc="<body style='margin:4px;background:seashell'>50% без висоти предка</body>"></iframe>
<p class="head">8. height="200", але в стилях height: 250px — виграє CSS</p>
<iframe class="css" width="220" height="200" srcdoc="<body style='margin:4px;background:aliceblue'>CSS сильніший</body>"></iframe>
<p class="head">9. Сучасно: ширина 100%, пропорція 16 / 9</p>
<div class="shyrshe">
<iframe class="proportsiya" srcdoc="<body style='margin:4px;background:honeydew'>aspect-ratio: 16 / 9</body>"></iframe>
</div>CSS
.head {
margin: 18px 0 6px;
color: #5a6472;
font: 600 14px/1.4 system-ui, sans-serif;
text-transform: uppercase;
letter-spacing: .04em;
}
iframe {
margin-right: 10px;
vertical-align: top;
border: 2px solid #b9c6d8;
}
.korobka {
width: 260px;
height: 400px;
padding: 6px;
border: 2px dashed #3a9a4f;
border-radius: 6px;
background: #f3fbf4;
}
.css {
height: 250px;
}
.shyrshe {
max-width: 420px;
}
.proportsiya {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
border: 0;
outline: 2px solid #2f6fd0;
}HTML
<p> Приклад використання атрибуту <code> height </code> </p>
<p id="text"> Поточна висота фрейма: 100 </p>
<input type="range" id="range" min="0" max="500" step="1" name="range">
<input type="button" value="Встановити висоту" onclick="f()">
<hr>
<div class="block1" >
<p> З використанням атрибуту <code> height </code> </p>
<iframe id="image" title="Демонстраційна рамка" srcdoc="<p style='font:14px sans-serif;margin:6px'>Документ усередині рамки</p>" height="100"></iframe>
</div>
<div class="block1" >
<p> Без використання атрибуту <code> height </code> </p>
<iframe title="Демонстраційна рамка" srcdoc="<p style='font:14px sans-serif;margin:6px'>Документ усередині рамки</p>"></iframe>
</div>CSS
.block1{
width:50%;
}JS
function f() {
var height = document.getElementById("range").value;
var image = document.getElementById("image");
image.setAttribute("height", height);
text.innerHTML = "Поточна висота зображення " + height;
}
//# sourceURL=pen.jsРізниця між HTML 4.01 та HTML5
Атрибут height для тегу <iframe> у HTML5 може мати значення лише у пікселях, а в HTML 4.01 висота може бути визначена в пікселях або в %.
Коментарі
Коментарів ще немає — будьте першим!