Форум программистов «Весельчак У»
  *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

  • Рекомендуем проверить настройки временной зоны в вашем профиле (страница "Внешний вид форума", пункт "Часовой пояс:").
  • У нас больше нет рассылок. Если вам приходят письма от наших бывших рассылок mail.ru и subscribe.ru, то знайте, что это не мы рассылаем.
   Начало  
Наши сайты
Помощь Поиск Календарь Почта Войти Регистрация  
 
Страниц: [1]   Вниз
  Печать  
Автор Тема: надо растянуть div на всю ширину высоту окна браузера  (Прочитано 42076 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Falsehood
Молодой специалист

ru
Offline Offline
Пол: Женский
не может быть


« : 06-03-2007 11:39 » 

в FF myDiv.style.width = "100%" и myDiv.style.height = "100%" работают, а в IE не хотят.
надо, чтобы div оставался шириной и высотой во все окно при изменении размера окна.
можно заставит IE работать правильно, не вешая обработчик на window.onresize?
спасибо.
Записан

Славная трава...
RXL
Технический
Администратор

Offline Offline
Пол: Мужской

WWW
« Ответ #1 : 06-03-2007 14:26 » 

Наташ, попробуй так:

Код: (CSS)
body, html
{
  padding: 0;
  margin: 0;
}

#screen
{
  position: absolute;
  overflow: auto;
  margin: 0;
  width: 100%;
  height: 100%;
}

Код: (HTML)
<body><div id="screen"></div></body>

Расскажи о результатах!
Проверь с контентом, большим экрана.
Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Falsehood
Молодой специалист

ru
Offline Offline
Пол: Женский
не может быть


« Ответ #2 : 07-03-2007 09:45 » 

в общем-то, это уже пробовалось. только свойства margin и padding я выставлять не пробовала. попытаюсь поэксперементировать с ними, но боюсь, что дело не в них.
и что значит, проверить с большим контентом экрана?
такое ощущение, что IE не хочет растягивать на 100% величины окна пустой div. может быть в этом дело? как это обойти?
о результатах расскажу завтра. а то и 9го. праздник, понимаешь... Улыбаюсь работать не дають..
Записан

Славная трава...
RXL
Технический
Администратор

Offline Offline
Пол: Мужской

WWW
« Ответ #3 : 07-03-2007 13:15 » 

Да, с совершенно пустым у него траблы. Я решил это несколько нестандартно.
Задача у меня была растянуть таблицу на весь экран, если ее высота меньше высоты экрана.


http://club.shelek.ru/index.php
Код: (HTML)
<table cellspacing="0" cellpadding="0" border="0" width="100%" class="main_layout">
<!-- header -->
        <tr  id="header_line">
                <td rowspan="5">
                        <div id="overall_vertical_stick"></div>
                </td>
..............
        </tr>
..............
<!-- body -->
        <tr id="body_line"><td>
Код: (Javascript)
var isIE = (navigator.appName.indexOf('Internet Explorer') != -1);
var isOpera = (navigator.appName.indexOf('Opera') != -1);
var isGecko = (navigator.appName.indexOf('Gecko') != -1);

function arrange_layout(first)
{
        if (!first && !window.innerHeight)
                location.reload();

        var screen_height = window.innerHeight ? window.innerHeight : document.body.clientHeight;
        document.getElementById('overall_vertical_stick').style.height = screen_height + 'px';
        var body_height = screen_height
                - document.getElementById('header').clientHeight
                - document.getElementById('menubar_t').clientHeight
                - document.getElementById('menubar_b').clientHeight
                - document.getElementById('footer').clientHeight - 20;

        if (isIE || isOpera)
                document.getElementById('body_line').style.height = body_height + 'px';
}

arrange_layout(true);
window.onresize = arrange_layout;


http://club.shelek.ru/styles/main.css
Код: (CSS)
#overall_vertical_stick
{
        background: url("../images/1.gif");
        border: none;
        width: 0px;
        float: right;
}

Растяжка страницы на "не менее 100% высоты экрана":
Код: (CSS)
html
{
        height: 100%;
}

body
{
        height: auto !important;
        height: 100%;
        min-height: 100%;
}

html, body /* это для подавления margins страницы */
{
        margin: 0;
        padding: 0;
}


Результат борьбы описан в темах:
https://forum.shelek.ru/index.php/topic,10147.0.html
https://forum.shelek.ru/index.php/topic,10223.0.html


Тут я описал еще один замеченный (и пока не обойденный) глюк IE:
https://forum.shelek.ru/index.php/topic,10382.0.html


Посмотри - здесь собираем ссылки на полезные ресурсы. Кстати, метод растяжения body взят из одной статьи по тем ссылкам (xhtml.ru).
https://forum.shelek.ru/index.php/topic,10393.0.html
Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Falsehood
Молодой специалист

ru
Offline Offline
Пол: Женский
не может быть


« Ответ #4 : 09-03-2007 10:09 » 

Рома, у меня проблема несколько иная. подглядели в гугле в документах при добавлении очередного документа на страницу накидывается div полупрозрачный со свойством display: "block", а сверху - форма с параметрами добавляемого документа.
расковыривать гугловские исходники поленились и сделали просто: полупрозрачный div накидывается на ширину и высоту окна браузера, вычисленные и указанные жестко в пикселах. шустрые пользователи умудрились запускать форму параметров отчета в свернутом до маленьких размеров окне, а потом разворачивать на весь экран. из-за этого полупрозрачным div-ом оставался накрыт только небольшой кусочек страницы в левом верхнем углу.
я попробовала ставить вместо размеров div-а в пикселах 100%, но сработало это только в Firefox-е. в результате разнообразных экспериментов могу предположить, что Internet Explorer не может взять 100% от высоты динамически формируемой страницы. короче, на статических html-страницах в IE все работает правильно, а на jsp - не рисует IE этот div на всю высоту окна Жаль
сделали все супер-топорно, потому как надоело возиться: задали высоту и ширину полупрозрачного div-а жестко, но заведомо очень большими. чтоб и маленькое окно он полностью покрывал, и растянутое... вот на такие преступления толкает нас IE Жаль
Записан

Славная трава...
RXL
Технический
Администратор

Offline Offline
Пол: Мужской

WWW
« Ответ #5 : 09-03-2007 13:53 » 

Хм. Может ты расскажешь суть задачи? Какая цель?
Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Falsehood
Молодой специалист

ru
Offline Offline
Пол: Женский
не может быть


« Ответ #6 : 13-03-2007 12:08 » 

исключительно декоративная Улыбаюсь
на самом деле, просто, чтобы страницы не плодить, форму, где вводятся параметры будущего отчета решили рисовать на той же странице, где отчет вызывается на просмотр
Записан

Славная трава...
RXL
Технический
Администратор

Offline Offline
Пол: Мужской

WWW
« Ответ #7 : 13-03-2007 16:54 » 

Посмотри тут (вариант 2):

тут лирика:
https://forum.shelek.ru/index.php/topic,6451.msg120092.html#msg120092

тут рабочий код:
https://forum.shelek.ru/index.php/topic,6451.msg120096.html#msg120096
Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Falsehood
Молодой специалист

ru
Offline Offline
Пол: Женский
не может быть


« Ответ #8 : 14-03-2007 11:53 » 

Ром, так у нас все так и делается. тесты с размерами прозрачного div-а по 100% отрабатывают и в Firefox, и в IE, а на рабочей странице в IE div с размерами 100% не рисуется. рабочая страница от тестовых отличается только тем, что она - jsp, а тестовые - html.
короче, потом время будет - поковыряюсь еще. может, и найду, в чем наша ошибка...
Записан

Славная трава...
RXL
Технический
Администратор

Offline Offline
Пол: Мужской

WWW
« Ответ #9 : 14-03-2007 16:34 » new

Falsehood, как раз и нужно использовать js - на html+css все не сделаешь.
Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Страниц: [1]   Вверх
  Печать  
 

Powered by SMF 1.1.21 | SMF © 2015, Simple Machines