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

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

<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% от окна, но не второй кадр. Какие-либо предложения?

источник

2015-03-10 Origamiguy

Try Изменение 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}

источник

2015-03-10 00:18:42

Спасибо, но он по-прежнему не работает. Я не должен был говорить, что второй кадр не отображается. В нижней части окна справа от первого кадра появляется немного границы рамки. Единственное различие в том, что второй кадр выглядит как правильная ширина. Он все еще не совпадает с верхней частью окна. – Origamiguy

О, извините, моя вина, я забыл удалить «margin-left: 30%;» из #cDiv. Кроме того, существует пробел между границей окна и рамкой, добавляющей тело {margin: 0}. Правило CSS должно помочь. Я отредактировал свой ответ выше –

совет в целом: Чтобы решить такие проблемы, браузер Firefox с расширением firebug является imho лучшим инструментом для работы. он позволяет вам попробовать свои правила CSS в wysiwyg-стиле в браузере –

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

ответ

Смежные вопросы