CSS: создание Frameset с использованием div для встраивания веб-страниц в iframes - PullRequest
Новая
       33

CSS: создание Frameset с использованием div для встраивания веб-страниц в iframes

0 голосов
/ 18 марта 2020

Так что я пытаюсь создать то, что составляет старую рамку школы .... без рамок. Используя CSS, это разделы и деления. Идея, по крайней мере, на рабочем столе, есть две строки по 50% высоты экрана. В одной строке есть два столбца, в другом - один.

Столбцы, которые я могу сделать, и ширина правильные. Высот с другой стороны нет. По умолчанию они имеют ту же высоту по умолчанию. Я знаю, что мог бы просто установить жесткое число для высоты, но оно должно реагировать на высоту экрана. Таким образом, iframe (или объект, который я пробовал оба) должен заполнить пространство, определенное либо в разделе, либо в div. и подходит идеально. Нет прокрутки.

Есть идеи, как это сделать? Это так далеко, как я мог бы это сделать.

HTML: 

<section>
    <div id="mk-top-left" style="overflow:hidden;">
        <iframe id="top-left" src="a.html" width="100%" height="100%" scrolling="no" style="border: none;"></iframe>
    </div>
    <div id="mk-top-right" style="overflow:hidden;">
        <iframe id="top-right" src="b.html" width="100%" height="100%" scrolling="no" style="border: none;"></iframe>
    </div>
</section>
<section>
    <div id="mk-bottom" style="overflow:hidden;">
        <iframe id="bottom" src="c.html" width="100%" height="100%" scrolling="no" style="border: none;"></iframe>
    </div>
</section>

CSS: 

section {
    width: 100%;
    height: 50%;
}
#mk-top-left {
    float: left;
    width: 35%;
}
#mk-top-right {
    float: left;
    width: 65%;
}
#mk-bottom {
    float: left;
    width: 100%;
}
iframe { overflow:hidden; }
...