За последние 24 часа нас посетили 18040 программистов и 1604 робота. Сейчас ищут 1356 программистов ...

div 100% по высоте

Тема в разделе "HTML и CSS", создана пользователем greenzlat, 2 июл 2013.

  1. greenzlat

    greenzlat Активный пользователь

    С нами с:
    27 апр 2008
    Сообщения:
    255
    Симпатии:
    0
    Есть 2х колоночная верстка. Футер прижат к низу экрана. Необходимо чтобы левая колонка и content растягивались на 100% до футера. В опере работает, а в хроме и мозиле нет(

    Код (Text):
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    3.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language ?>" lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">
    5.   <head>
    6.         <title></title>
    7.     </head>
    8.   <body>
    9. <div id="wrapper">
    10.     <div id="header">
    11.         ХЕДЕР
    12.     </div><!-- #header-->
    13.  
    14.             <div class="sidebar" id="sideLeft">
    15.                 Левый
    16.             </div><!-- .sidebar#sideLeft -->
    17.             <div id="content">
    18.     КОНТЕНТ
    19.             </div><!-- #content-->
    20. </div><!-- #wrapper -->
    21. <div id="footer">
    22.  
    23. </div><!-- #footer -->
    24. </body>
    25. </html>
    CSS код:
    Код (Text):
    1.  
    2. * {
    3.     margin: 0;
    4.     padding: 0;
    5. }
    6. html {
    7.     height: 100%;
    8. }
    9. body {
    10.     font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
    11.     width: 100%;
    12.     height: 100%;
    13. }
    14.  
    15.  
    16.  
    17. #wrapper {
    18.     position:relative;
    19.     width: 1000px;
    20.     margin: 0 auto;
    21.     min-height: 100%;
    22.     height: auto !important;
    23.     height: 100%;
    24.  
    25. }
    26.  
    27.  
    28. /* Header
    29. -----------------------------------------------------------------------------*/
    30. #header {
    31.     height: 150px;
    32.     background: #FFE680;
    33. }
    34.  
    35.  
    36. /* Middle
    37. -----------------------------------------------------------------------------*/
    38. #content {
    39.     padding: 0 20px;
    40.     margin-left:100px;
    41. }
    42.  
    43.  
    44. /* Sidebar Left
    45. -----------------------------------------------------------------------------*/
    46. #sideLeft {
    47.     float: left;
    48.     width: 100px;
    49.     position: relative;
    50.     background: url(images/bg_left.png) repeat-y;
    51.     min-height: 100%;
    52.     height: auto !important;
    53.     height: 100%;
    54.  
    55. }
    56.  
    57.  
    58. /* Footer
    59. -----------------------------------------------------------------------------*/
    60. #footer {
    61.     position:relative;
    62.     width: 1000px;
    63.     margin: -100px auto 0;
    64.     height: 100px;
    65.     position: relative;
    66.     background:url(images/bg_footer.png) no-repeat;
    67.    
    68. }
     
  2. artoodetoo

    artoodetoo Суперстар
    Команда форума Модератор

    С нами с:
    11 июн 2010
    Сообщения:
    11.115
    Симпатии:
    1.244
    Адрес:
    там-сям
    если искать с другой формулировкой: "колонки одинаковой высоты", то будет немало кросс-браузерных реализаций.

    в твоем случае проблема наверное в том, что неочевидно от чего следует брать 100%. это как курица и яйцо: что первично?
    высота контейнера зависит от содержимого, а содержимое ты пытаешся отсчитывать от высоты контейнера. этот круг надо рвать.
     
  3. greenzlat

    greenzlat Активный пользователь

    С нами с:
    27 апр 2008
    Сообщения:
    255
    Симпатии:
    0