Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Высота div в процентах

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Без описания
Поиск в теме | Версия для печати
Инсеин
Отправлено: 21 Июля, 2012 - 14:40:19
Post Id



Новичок


Покинул форум
Сообщений всего: 61
Дата рег-ции: Авг. 2011  


Помог: 0 раз(а)
Доброе время суток!
Собственно имеется такой html:
CODE (html):
скопировать код в буфер обмена
  1.  
  2. <div id="basic">
  3.    <div id="div1"></div>
  4.    <div id="div2"></div>
  5.    <div id="div3"></div>
  6.    <div id="div4"></div>
  7. </div>
  8.  

За такие id просьба не ругаться, написал их для примера только Улыбка
Так вот ... "basic" растягивается на 100% по высоте и ширине, "div1" и "div4" имеет высоту в 35px ... "div2" и "div3" должны получить высоту в процентах (именно в процентах, так как их высота должна зависить от высоты окна браузера).
Нужного результата смог добиться только с помощью JavaScript. Но так как пользователь может во время просмотра страницы изменить размер своего браузера, то тогда всё приобретает не очень хороший вид, по сему в js всё повесил на SetInterval ... и ... всё на странице начало ужасно подтормаживать. Поэтому решил отказаться от js, но через css не получается добиться того же. Недовольство, огорчение
Собственно и вопрос-просьба: "Как ?" Улыбка


-----
Судя по ходу мыслей, вас постоянно преследуют глупости.
 
 Top
armancho7777777 Супермодератор
Отправлено: 21 Июля, 2012 - 15:54:11
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)
Всем родительским блокам задайте высоту в %
HTML, BODY 100%
 
 Top
Инсеин
Отправлено: 24 Июля, 2012 - 18:37:37
Post Id



Новичок


Покинул форум
Сообщений всего: 61
Дата рег-ции: Авг. 2011  


Помог: 0 раз(а)
armancho7777777, не получится. Из-за того, что верхний див статичный и имеет высоту в 30px, а два следующих дива получают высоту в процентах уже от общей высоты окна, получается, что третий уже уходит вниз на 30px.


-----
Судя по ходу мыслей, вас постоянно преследуют глупости.
 
 Top
DelphinPRO
Отправлено: 24 Июля, 2012 - 19:13:31
Post Id



Активный участник


Покинул форум
Сообщений всего: 7187
Дата рег-ции: Февр. 2012  


Помог: 353 раз(а)
Инсеин пишет:
Но так как пользователь может во время просмотра страницы изменить размер своего браузера, то тогда всё приобретает не очень хороший вид, по сему в js всё повесил на SetInterval ..


почему вам не пришло в голову делать пересчет по событию onresize ?
(Добавление)
Впрочем проблема решаема и за счет CSS

http://jsfiddle[dot]net/8Wjhg/

CODE (html):
скопировать код в буфер обмена
  1. <div class="basic">
  2.     <div class="wrapper">
  3.         <div class="div1">div1</div>
  4.         <div class="div2">div2</div>
  5.         <div class="div3">div3</div>
  6.         <div class="div4">div4</div>
  7.     </div>
  8. </div>

CODE (css):
скопировать код в буфер обмена
  1. html, body, .basic {
  2.     height: 100%;
  3.     font-size: 20px;
  4.     color: white;
  5.     text-align: center;
  6. }
  7. .wrapper {
  8.     height: 100%;
  9.     box-sizing: border-box;
  10.     padding: 35px 0;
  11.     position: relative;
  12. }
  13. .div1 {
  14.     position: absolute;
  15.     left: 0;
  16.     top: 0;
  17.     width: 100%;
  18.     height: 35px;
  19.     background: red;
  20. }
  21. .div2, .div3 {
  22.     height: 50%;
  23.     width: 100%;
  24.     background: blue;
  25. }
  26. .div3 {
  27.     background: green;
  28. }
  29. .div4 {
  30.     position: absolute;
  31.     left: 0;
  32.     bottom: 0;
  33.     width: 100%;
  34.     height: 35px;
  35.     background: red;
  36. }


Разумеется будут проблемы с IE7, но с ними вы как-нибудь уж сами..


-----
Чем больше узнаю, тем больше я не знаю.
 
 Top
Инсеин
Отправлено: 24 Июля, 2012 - 23:10:38
Post Id



Новичок


Покинул форум
Сообщений всего: 61
Дата рег-ции: Авг. 2011  


Помог: 0 раз(а)
DelphinPRO, спасибо огромное.


-----
Судя по ходу мыслей, вас постоянно преследуют глупости.
 
 Top
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB