Вверх

Блог
RSS лента

Ответить на комментарий

height: 100% с помощью jquery (вложений)

Я думаю что многие сталкивались с проблемой когда при соблюдении стандартов (<!DOCTYPE ), нужно растянуть таблицу или див на весь экран браузера, ну это можно побороть с помощью цсс, но вот когда в этом диве есть вложение тут уже тяжелее. И тут на помощь приходит jquery.
Обрисую мою ситуацию. Была у меня табличка в одной из ячеек был див который нужно было тянуть по все высоте этой ячейки. И сделал я это вот так:

  1. <script type="text/javascript">
  2.  
  3.  $(document).ready(function () {  
  4.      $("#left_menu").height($("#left_td").height());    
  5. });
  6.  
  7. </script>
  8. <table>
  9.  <tr>
  10.   <td id="left_td">
  11.    <div id="left_menu"></div>
  12.   </td>
  13.  </tr>
  14. </table>

left_menu - это тот див который нужно тянуть.
left_td - эта ячейка в которой находится див который нужно тянуть
То есть логика такая, мы берем высоту ячейки и просто присваиваем её диву.

Если вам нужно что бы просто див или таблица была на весь экран то это можно сделать так:

  1. <script type="text/javascript">
  2.  
  3.  $(document).ready(function () {  
  4.      $("#menu").height($(document).height());    
  5. });
  6. </script>

или в css

  1. html, body  {
  2.  margin:0px;
  3.  padding:0px;
  4.  border:0px;
  5.  height: 100%;
  6. }

Да и самое главное должна быть подключена библиотека jquery.
Вот такими методами пришлось решать эту проблему. Есть проще способ это не соблюдать стандарты. Но возможно и есть способ побороть просто через цсс или хтмл, но я его к сожалению не знаю покамест, если кто то знает поделитесь :)

Ваша оценка: Пусто Средняя: 3.5 (4 голосов)

Ответить

 
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>. Beside the tag style "<foo>" it is also possible to use "[foo]".
  • Image links with 'rel="lightbox"' in the <a> tag will appear in a Lightbox when clicked on.
  • Image links from G2 are formatted for use with Lightbox2
  • Image links with 'rel="lightshow"' in the <a> tag will appear in a Lightbox slideshow when clicked on.
  • Links to HTML content with 'rel="lightframe"' in the <a> tag will appear in a Lightbox when clicked on.
  • Links to video content with 'rel="lightvideo"' in the <a> tag will appear in a Lightbox when clicked on.
  • Links to inline or modal content with 'rel="lightmodal"' in the <a> tag will appear in a Lightbox when clicked on.

Подробнее о форматировании

Главная | Портфолио | Услуги | Контакты | Блог