Преобразование FRAMESET в IFRAME

Я пытаюсь преобразовать старый код, использующий FRAMESET, для использования IFRAME или DIV. Старый код приводит к двум вертикальным кадрам, левый из которых изначально занимает 30% окна. Пользователь может перемещать разделительную линию, чтобы изменить пропорции. Старый код (урезанный):

<HTML>
<HEAD>
</HEAD>
    <FRAMESET frameSpacing="3" frameBorder="0" cols=30%,* >
    <FRAME id="contentGenerator" src="content.html"  scrolling="no">
    <FRAME id="content" src="startNSM.html" >
    </FRAMESET>
</HTML>

Что у меня есть до сих пор:

<HTML>
<HEAD>

<STYLE>
#cgDiv {
    HEIGHT: 100%; WIDTH: 30%; VERTICAL-ALIGN: top; POSITION: fixed
}
#contentGenerator {
    HEIGHT: 100%    
}
#cDiv {
    HEIGHT: 100%; WIDTH: 70%; VERTICAL-ALIGN: top; POSITION: relative
}
#content {
    HEIGHT: 100%
}
</STYLE>
</HEAD>
<BODY >
<DIV id="cgDiv">
    <IFRAME id="contentGenerator" src="content.html">
    </IFRAME>
</DIV>
<DIV id="cDiv">
    <IFRAME id="content" src="startNSM.html">
    </IFRAME>
</DIV>
</BODY>
</HTML>

Что это делает, так это отображает первый IFRAME в 30% окна, но не второй кадр. Какие-либо предложения?


html iframe frameset
person Origamiguy    schedule 10.03.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Попробуйте изменить CSS на следующее

#cgDiv {
    display: inline-block;
    height: 100%;
    vertical-align: top;
    width: 30%;
}

#contentGenerator, #content {
    height: 100%;
    width: 100%;
}

#cDiv {
    display: inline-block;
    height: 100%;
    vertical-align: top;
    width: 69.5%;
}

body { margin: 0}
person Florian Eck    schedule 10.03.2015
comment
Спасибо, но это все еще не работает. Я не должен был говорить, что второй кадр не появляется. Немного границы кадра появляется в нижней части окна, справа от первого кадра. Единственная разница в том, что второй кадр выглядит правильной ширины. Он все еще не выровнен с верхней частью окна. - person Origamiguy; 10.03.2015
comment
о, извините, я виноват, я забыл удалить «margin-left: 30%;» из #cDiv. Кроме того, между границей окна и границей фрейма есть пробел, добавление правила CSS body {margin: 0} должно помочь. я отредактировал свой ответ выше - person Florian Eck; 10.03.2015
comment
общий совет: для решения подобных проблем лучше всего подходит браузер Firefox с расширением firebug. это позволяет вам попробовать свои правила CSS wysiwyg в браузере - person Florian Eck; 10.03.2015