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 :: height auto

 PHP.SU

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


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

> Без описания
Поиск в теме | Версия для печати
imediasun
Отправлено: 19 Августа, 2013 - 13:59:55
Post Id


Частый посетитель


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


Помог: 2 раз(а)

[+][+][+][+][+]
подскажите пожалуйста как сделать чтобы height auto работало, в данном коде не работает

CODE (html):
скопировать код в буфер обмена
  1.  
  2. <div id="wrapper">
  3. <div id="content">
  4.    <div class="content area">
  5.            .....здесь какойто контент
  6.  
  7.    </div>
  8. </div>
  9. </div>
  10.  
  11. html {
  12. height: auto;
  13. -webkit-background-size: cover;
  14. -moz-background-size: cover;
  15. -o-background-size: cover;
  16. background-size: cover;
  17. }
  18. header, nav, section, article, aside, footer {
  19.         display: block;
  20. }
  21. body {
  22.         font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
  23.         width: 100%;
  24.         height:auto;
  25. }
  26. #wrapper {
  27.         width: 1000px;
  28.         margin: 0 auto;
  29.         min-height: 100%;
  30.         height: auto !important;
  31.         height: 100%;
  32. }
  33. #content {
  34.         padding: 0 0 100px;
  35.         color:#000;
  36.         height:auto;
  37.         background:#fff;
  38.         position:relative;
  39.        
  40. }
  41. #content_area{
  42. width:1000px;
  43. min-height:600px;
  44. height:auto;
  45. position:relative;}
  46.  

(Отредактировано автором: 19 Августа, 2013 - 14:01:03)

 
 Top
DelphinPRO
Отправлено: 19 Августа, 2013 - 17:04:01
Post Id



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


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


Помог: 353 раз(а)
оно работает так как и должно Улыбка - высота подстраивается под содержимое.

Указание высоты в процентах не имеет силы, если у родительского элемента высота задана как "auto" (или не задана совсем, что в общем одно и то же).

Данная конструкция
CODE (css):
скопировать код в буфер обмена
  1.         min-height: 100%;
  2.         height: auto !important;
  3.         height: 100%;

является хаком для IE6. Вы все еще под него верстаете?
Для остальных браузеров достаточно
CODE (css):
скопировать код в буфер обмена
  1.         min-height: 100%;


-----
Чем больше узнаю, тем больше я не знаю.
 
 Top
imediasun
Отправлено: 19 Августа, 2013 - 17:32:53
Post Id


Частый посетитель


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


Помог: 2 раз(а)

[+][+][+][+][+]
так в том то и дело что высота блоков не подстраивается под содержимое
 
 Top
IllusionMH
Отправлено: 19 Августа, 2013 - 17:41:01
Post Id



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


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


Помог: 242 раз(а)
imediasun, ссыль на jsFiddle с нерабочим примером(и пример контента тоже), а то полгода гадать будем.
Есть подозрение, что вместо
CODE (CSS):
скопировать код в буфер обмена
  1. html {
  2. height: auto;
  3. }

должно быть
CODE (CSS):
скопировать код в буфер обмена
  1. html, body {
  2. height: 100%;
  3. }

либо тут что-то лишнее
CODE (htmlphp):
скопировать код в буфер обмена
  1. #content_area{
  2. width:1000px;
  3. min-height:600px;
 
 Top
imediasun
Отправлено: 19 Августа, 2013 - 20:28:34
Post Id


Частый посетитель


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


Помог: 2 раз(а)

[+][+][+][+][+]
Это всь контент, а так он отображается в реале [url]
http://size[dot]pinokio[dot]in[dot]ua/site/pages/categories
[/url]
CODE (html):
скопировать код в буфер обмена
  1.  
  2. <div id="content">
  3.        
  4. <div id="content_area">
  5. <div class="side_left">
  6. <div class="hr"></div>
  7. <div class="collapsed"><div class="triangle"><h3><div class="title_collapsed">Бренд</div ></h3></div>
  8. <div class="refineattributes">
  9. <ul>
  10. <li name="brend"> <input type="checkbox" name="boss"><label>Hugo Boss</label></li>
  11. <li name="brend"> <input type="checkbox" name="mango"><label>Mango</label></li>
  12. <li name="brend"> <input type="checkbox" name="diesel"><label>Diesel</label></li>
  13. </ul>
  14. </div>
  15. <input type="hidden" value="0"name="open_close">
  16. </div>
  17. <div class="hr"></div>
  18. <div class="collapsed"><div class="triangle"><h3><div class="title_collapsed">Цвет</div ></h3></div>
  19. <div class="refineattributes">
  20. <ul>
  21. <li name="brend"> <input type="checkbox" name="boss"><label>белый</label></li>
  22. <li name="brend"> <input type="checkbox" name="mango"><label>черный</label></li>
  23. <li name="brend"> <input type="checkbox" name="diesel"><label>розовый</label></li>
  24. </ul>
  25. </div>
  26. <input type="hidden" value="0"name="open_close">
  27. </div>
  28. <div class="hr"></div>
  29. <div class="collapsed"><h3><span >Размер</span ></h3></div>
  30. <div class="hr"></div>
  31. </div><!--side_left-->
  32. </div><!--slider_area-->       
  33. </div><!-- #content-->
  34.  


CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. * {
  3.         margin: 0;
  4.         padding: 0;
  5. }
  6. html {
  7.         height: auto;
  8.         -webkit-background-size: cover;
  9. -moz-background-size: cover;
  10. -o-background-size: cover;
  11. background-size: cover;
  12. }
  13. header, nav, section, article, aside, footer {
  14.         display: block;
  15. }
  16. body {
  17.         font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
  18.         width: 100%;
  19.         height:auto;
  20.        
  21.         background: url('/templates/store/1/img/BG_boss.jpg') no-repeat center center fixed;
  22.        
  23.        
  24.         }
  25.  
  26.  
  27. }
  28. a {
  29.         color: blue;
  30.         outline: none;
  31.         text-decoration: underline;
  32. }
  33. a:hover {
  34.         text-decoration: none;
  35. }
  36. p {
  37.         margin: 0 0 18px
  38. }
  39. img {
  40.         border: none;
  41. }
  42. input {
  43.         vertical-align: middle;
  44. }
  45. #wrapper {
  46.         width: 1000px;
  47.         margin: 0 auto;
  48.         min-height: 100%;
  49.         height: auto !important;
  50.         height: 100%;
  51. }
  52.  
  53.  
  54.  
  55. /* Middle
  56. -----------------------------------------------------------------------------*/
  57. #content {
  58.         padding: 0 0 100px;
  59.         color:#000;
  60.         height:auto;
  61.         background:#fff;
  62.         position:relative;
  63.        
  64. }
  65.  
  66. #content_area,#slider_area{
  67. background: #0d153c; /* Old browsers */
  68. background: -moz-linear-gradient(-45deg,  #0d153c 0%, #1c295f 42%, #213478 67%, #223a86 100%); /* FF3.6+ */
  69. background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#0d153c), color-stop(42%,#1c295f), color-stop(67%,#213478), color-stop(100%,#223a86)); /* Chrome,Safari4+ */
  70. background: -webkit-linear-gradient(-45deg,  #0d153c 0%,#1c295f 42%,#213478 67%,#223a86 100%); /* Chrome10+,Safari5.1+ */
  71. background: -o-linear-gradient(-45deg,  #0d153c 0%,#1c295f 42%,#213478 67%,#223a86 100%); /* Opera 11.10+ */
  72. background: -ms-linear-gradient(-45deg,  #0d153c 0%,#1c295f 42%,#213478 67%,#223a86 100%); /* IE10+ */
  73. background: linear-gradient(135deg,  #0d153c 0%,#1c295f 42%,#213478 67%,#223a86 100%); /* W3C */
  74. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d153c', endColorstr='#223a86',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  75. width:1000px;
  76. height:600px;
  77. position:relative;
  78. -webkit-box-shadow: 0px 5px 30px rgba(0, 0, 0, 1);
  79. -moz-box-shadow:    0px 5px 30px rgba(0, 0, 0, 1);
  80. box-shadow:         0px 5px 30px rgba(0, 0, 0, 1);
  81. }
  82.  
  83. .side_left{
  84. width:150px;
  85. background:#fff;
  86. position:absolute;
  87. top:0px;left:10px;
  88. height:500px;
  89. color:grey;
  90. }
  91.  
  92. .refineattributes{
  93. margin:8px 0px;
  94. display:none;
  95. }
  96. .refineattributes ul li{
  97. list-style-type:none;
  98. }
  99. .refineattributes label{
  100. padding-left:5px;
  101. }
  102.  
  103.  
  104.  

(Отредактировано автором: 19 Августа, 2013 - 20:30:41)

 
 Top
IllusionMH
Отправлено: 19 Августа, 2013 - 22:19:14
Post Id



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


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


Помог: 242 раз(а)
imediasun, у вас блоки абсолютно позиционированы, естественно div#content_area схлопывается.
Как нормально сверстать смотрите здесь
 
 Top
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« Вопросы новичков »


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



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

 
Powered by ExBB FM 1.0 RC1. InvisionExBB