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 :: HTML5 блок или таблица на всю высоту

 PHP.SU

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


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

> Без описания
Поиск в теме | Версия для печати
3d_killer
Отправлено: 16 Сентября, 2014 - 22:31:16
Post Id



Участник


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


Помог: 21 раз(а)
Сразу приведу код (тут не прикладываю заголовок и т.д.)
CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. <body>
  3. <!--Главный контейнер-->
  4. <div id="document_container" class="w_100">  
  5.     <!--ЛОГО-->
  6.     <div id="document_top" class="h_40">
  7.         <!--ВЕРХ-->
  8.     </div>
  9.     <!--МЕНЮ-->
  10.         <div id="document_menu" class="h_40">
  11.  
  12.     </div>
  13.     <!--КОНТЕЙНЕР С КОНТЕНТОМ-->
  14.         <div id="document_content">
  15.     <table>
  16.                 <tr>
  17.                 <td>&nbsp;</td>
  18.                 <td>&nbsp;</td>
  19.                 <td>&nbsp;</td>
  20.                 </tr>
  21.         </table>
  22.     </div>
  23.     <!--ЗАГЛУШКА-->
  24.         <div id="document_cover" class="h_40"></div>
  25. </div>
  26. <!--ПОДВАЛ-->
  27. <div id="document_bottom" class="h_40 w_100">
  28. </div>
  29. </body>
  30. </html>
  31.  

и ксс:
CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. body{width:100%; min-width:1000px; padding:0px; margin:0px; font-family:Tahoma, Geneva, sans-serif; font-size:12px; position: relative;}
  3. html,body{height:100%;}
  4. body,td,th{font-family:Tahoma, Geneva, sans-serif; font-size:12px;}
  5. .h_40{height:40px;}
  6.  
  7. #document_menu{background-color: #0079a4;}
  8. #document_container{height: auto !important; min-height:100%;}
  9. #document_bottom{margin-top:-40px; position: relative;background-color: #0079a4;}
  10. #document_top{background-image:url(../image/top_bg.png);}
  11.  

получается что есть шапка, меню, контент и футер притянутый к низу (в этом все хорошо)
проблемка заключается в том что мне надо таблицу растянуть на всю высоту пустого контейнера, чтобы сделать типо разделителя на 2 окна который можно двигать.

если высоту не сделать 100%, то когда контента мало, выглядит не очень хорошо, на картинке приложил примерно что хочу сделать, проблема в том что на html 5 никак не могу придумать как такое реализовать Огорчение
Прикреплено изображение (Нажмите для увеличения)
123.jpg

(Отредактировано автором: 16 Сентября, 2014 - 22:32:35)

 
My status
 Top
DelphinPRO
Отправлено: 17 Сентября, 2014 - 15:43:07
Post Id



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


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


Помог: 353 раз(а)
http://jsfiddle[dot]net/DelphinPRO/GZ4xF/5/

реализована 100% высота и изменение размеров панелек мышкой.


-----
Чем больше узнаю, тем больше я не знаю.
 
 Top
3d_killer
Отправлено: 17 Сентября, 2014 - 16:36:45
Post Id



Участник


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


Помог: 21 раз(а)
Спасибо за ответ, почти все хорошо в примере единственное на Firefox появляется прокрутка и свободное место в самом низу как раз на 50px, не пойму как можно устранить
(Добавление)
заменив в .footer
top:-50px;
на
margin-top:-50px;

Получим одинаковый эффект на всех браузерах строки пустой нет но есть прокрутка на 50 пикселей
 
My status
 Top
3d_killer
Отправлено: 17 Сентября, 2014 - 19:06:57
Post Id



Участник


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


Помог: 21 раз(а)
кто нибудь поможет доделать?
http://jsfiddle[dot]net/GZ4xF/6/
 
My status
 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