Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > iframe, height + html5

Автор: Muerto 2.10.2011, 13:57

Не могу понять, вот есть такой код

Код


<!DOCTYPE html>
<html>
<head>
<title>google</title>
<head>
<body leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0">
<iframe name="sframe" id="sframe" src="http://google.com" frameborder="0" scrolling="auto" width="100%" height="90%"></iframe>
<div style="background-color:blue;height:10%;text-align:center;" >
информация
</div>
</body>
</html>

Если убрать

Код


<!DOCTYPE html>

То все норм, а если оставить, то айфрейм не растягивается на всю страницу...
Буду рад если кто подскажет как это правильно делать , в частности что бы работало с html5

----

Пока наковырял:

Код


<!DOCTYPE html>
<html>
    <head>        
        <title>google</title>
        <style type="text/css">
          html, body {margin: 0; padding: 0; height: 100%;overflow:hidden;}
          iframe#sframe {height: 90%; width: 100%;border:none;margin: 0; padding: 0; overflow:auto;}
       </style>
    <head>
    <body>
        <iframe name="sframe" id="sframe" src="http://google.com"></iframe>
        <div style="background-color:#72a4d3;height:12%;text-align:center;margin-top:-5px;" >
            информация
        </div>
    </body>
</html>

Но не кроссбраузерно и оч коряво ( пришлось маргин-топ ставить -5, а то почему то белое место оставляет...

Автор: Toydestroyer 2.10.2011, 14:15

Код


html, body {
    width: 100%;
    height: 100%;
}

Может так?

И да, раз уж заявили html5, то не используйте атрибуты десятилетней давности:

Цитата

Автор: Muerto 2.10.2011, 15:06

Toydestroyer в первом посте есть продолжение, там уже у бади нету этих атрибутов...
Мне на самом деле нужно четкое деление, айфрейм который растягивается на всю страницу, и 100 к примеру пикселей по высоте внизу - должен быть div
т.е. у дива размер фиксированный, а айфрейм тянется (ну должен покрайней мере smile

)

По теме кстати пока нарыл http://stackoverflow.com/questions/325273/make-iframe-to-fit-100-of-containers-remaining-height

из всех вариантов похоже с javascript самый нормальный пока...

Хотя хотелось бы норм css решения.

Автор: SelenIT 2.10.2011, 17:05

Цитата(Muerto @ 2.10.2011, 15:06

)

айфрейм который растягивается на всю страницу, и 100 к примеру пикселей по высоте внизу - должен быть div
т.е. у дива размер фиксированный, а айфрейм тянется

Имхо, надежнее всего через абс. позиционирование, http://jsfiddle.net/Qm8e3/.

Автор: Muerto 2.10.2011, 23:49

SelenIT Отлично работает во всех браузерах кроме ie ...

Спасает от части задать iframe_container высоту 100% ищу как лучше...

Автор: SelenIT 2.10.2011, 23:58

Какого IE? 6-го, что-ли? Его я не учитывал, на крайняк, для него можно задать контейнеру _height: expression(this.parentNode.clientHeight - 100 + 'px'). А начиная с 7-го должно работать.

Автор: Muerto 2.10.2011, 23:59

В 8мом тестил, в конце проставил

height: expression(this.parentNode.clientHeight - 98 + 'px')
Вроде должно работать во всех IE

почему то сотка оставляля "пустое" место между нижним блоком и фреймом...
вечно головная боль с IE smile

В общем ещё раз спасибо большое!

Автор: SelenIT 3.10.2011, 00:09

Хм, я тестил в 9-м во всех режимах, кроме Quirks (т.е. "родном" и эмуляциях 7-ки и 8-ки) - везде работает как есть. У вас Quirks mode не включен случаем (через F12)? И перед доктайпом ничего нет - ни комментариев, ни BOM-метки?

Автор: Muerto 3.10.2011, 00:29

SelenIT, Ничего нету... первая строка доктайп, квирк модов не врубал...

Автор: SelenIT 3.10.2011, 01:05

Упс, 1000 извинений. В режиме 7-го действительно не растягивает, я тестил в малюсеньком окне (на jsfiddle) и не сразу заметил. Соответственно, в 8-ке в Compatibility view будет тот же глюк. Да, получается, для 7-го тоже нужен expression...