Sinot
-
Posts
11 -
Joined
-
Last visited
Sinot's Achievements
Explorer (1/14)
0
Reputation
-
Етить за ногу. Я перепутал static и fixed/relative/absolute для родительского элемента. Спасибо большое. (Плюс не ставиться почему-то )
-
Приветствую всех! Есть DIV (main), внутри которого расположен некоторый набор элементов. <div id="main"> <span>Форма чего-нибудь</span><br /> <div>Кнопки, картинки, текст и т.п.</div> </div> Иногда нужно блокировать все элементы и выводить анимацию поверх. Подобное я делал для всего экрана с помощью DIV и CSS. <style> #block { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-image: url("../img/wait.gif"); background-repeat: no-repeat; background-position: center; z-index: 5; } </style> <div id="block"> </div> Но вот как это сделать для DIV? Пробовал растянуть DIV с display: table; (block внутри main естественно) #main { position: static; } #block { display: table; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; } Аналогично вместо DIV - TABLE с одной ячейкой. В любом случае "размазывает" на весь экран, а не на родительский элемент. JavaScript уже совсем на крайний. DIV (main) не фиксированного размера. Спасибо. P.S. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
Тут тоже есть нюансы. Если взять два "DIV" и нижнему добавить свойство "hiegh: 100%;", то эти 100% возьмутся относительно всего окна, а не свободного места. Через свойство "position: fixed;" для верхней части у меня получилось это. Но в этом случае скролл появляется для всего окна, а не нижней части (как на картинке).
-
Нижняя ячейка (та что со скроллом) в IE никак не хочет работать.
-
Не-не. Давайте я обрисую всю ситуацию. С верху страницы находиться панель редактирования, которая должна быть всегда на виду. Снизу страницы выводиться таблица из базы данных (PHP и javascript опустим). Я переделал таблицу на "DIV" (3 пост). Но скролл появляется для всей страницы, а не для ее нижней части.
-
У ячейки стоит высота 100%. (Я же привел часть кода в первом посте) Я не очень понял что Вы имели в виду. В ячейке будет еще одна таблица. (Опять же из первого поста)
-
Если ячейке не задавать высоту, а "DIV" - 100%, то: * Chrome - все как надо * IE - высота для "DIV" берется относительно окна, ячейку раздвигает до "DIV" Если ячейке задать 100% и "DIV" - 100%, то: * Chrome - все как надо * IE - высота для ячейки (и "DIV" как я понял) берется относительно окна, и получается тоже самое. Если ячейке задать N px, а "DIV" - 100%, то: * Chrome - растянет ячейку на все окно (если N < окна), или растянет ячейку до N (если N > окна) * IE - высота ячейки N, "DIV" тоже N (на всю ячейку) P.S. Это все я реально попробовал.
-
Да, я так и писал в первом посте. Но (опять же из первого поста) если попытаться растянуть "DIV" на всю ячейку по высоте "height: 100%;", то IE растягивает "DIV" относительно окна, а не ячейки.
-
Не ужели никто не сталкивался? А если переформулировать вопрос: Нужно расположить два блока один под другим, так чтобы первый растянулся в высоту по содержимому, а второй растянулся на всю оставшуюся высоту окна (если в него все не влезло,то добавить скролл). //———- В общем частично решил проблему. Но вопрос остается открытым: Как добавить в ячейку (высота на все оставшееся место) скролл? Для кого интересно: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>Тест</title> <link rel="stylesheet" type="text/css" href="./style.css" /> </head> <body> <div id="editpanel"> Какие-то<br /> элементы<br /> управления.<br /> </div> <div id="content"> Тут таблица. </div> </body> </html> CSS: html, body { margin: 0px; padding: 0px; } #editpanel { position: fixed; height: 265px; width: 100%; background-color: #FFFF00; } #content { padding-top: 265px; vertical-align: top; }
-
В том что таблица внутри ячейки с "overflow: scroll;" просто раздвигает ее игнорируя этот самый скролл. //———- Теперь еще один глюк вылез. Если просто нижней ячейке задать "height: 100%", то ее растянет относительно всего окна, а не оставшегося места. В Хроме все нормально. о_О
-
Приветствую всех. Есть таблица на всю ширину экрана из двух ячеек. Верхняя должна быть высотой по содержимому, а нижняя на оставшуюся высоту окна. В нижнюю ячейку выводиться таблица, и если она не вмещается, то в ячейки появляется скролл. Полазив по просторам интернета выяснилось, что в ячейку просто так скролл не добавить (при "overflow: scroll;" визуально появляется, но не работает). С помощью добавления "DIV" в ячейку такое можно провернуть, но есть нюанс. Если "DIV" добавить свойство "height: 100%;", то в IE 8 "DIV" растягивается на 100% относительно окна, а не ячейки. (в Хроме все нормально) Собственно вопрос в том, как это поправить? Часть кода: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>Тест</title> <link rel="stylesheet" type="text/css" href="./style.css" /> </head> <body> <table id="main" border="1"> <tr><td id="editpanel"> 1<br /> 2<br /> 3<br /> </td></tr> <tr><td id="content"> <div> Тут таблица<br /> 2<br /> 3<br /> 4<br /> 5<br /> 6<br /> 7<br /> </div> </td></tr> </table> </body> </html> CSS: html, body { margin: 0px; padding: 0px; height: 100%; } #main { width: 100%; height: 100%; } #content { height: 100%; vertical-align: top; } div { height: 100%; overflow: auto; }