Архивировано

Эта тема находится в архиве и закрыта для публикации сообщений.

  • 0
sarcus

Расстягиваем внешний div самым внутренним по высоте

Вопрос

Есть вложенные блоки

<div id="d1">

<div id="d2">

<div id="d3">

.......

</div>

</div>

</div>

Нужно чтобы все блоки имели высоту 100%  и самый внутренний div (он может быть и 4-м... вложением) растягивал все внешние в зависимости от контента если контент больше 100%.

Желательно без js.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Рекомендованные сообщения

Не то. Изначально высота внутреннего блока должна быть 100% от высоты экрана. Далее, в зависимости от контента, растягиваем внешний блок. (+ поддержка ie8)

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
В 25.04.2017 в 06:33, sarcus сказал:

Изначально высота внутреннего блока должна быть 100% от высоты экрана

min-height: 100vh;

1vh - это высота в 1% относительно высоты экрана, соответственно 100vh - 100%

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
19 минут назад, Даниил Виттманн сказал:

1vh - это высота в 1% относительно высоты экрана, соответственно 100vh - 100%

IE 8 их не поддерживает.

http://caniuse.com/#search=vh

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Жаль конечно, нет красивого решения. Большое спасибо за ответы.  Просто задачка интересная, но не для ie8.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

  • Спрашивают сейчас

  • Пишут сейчас

    • Разметка выглядит как минимум странно!          В любом случае надо сделать вашу разметку лучше!              и после этого уже ожидать хороших примеров.  ... Далее по:  <!DOCTYPE html> - #html5 - ок  <html lang="en"> - почему? в документе объявлена латиница а записи в этом доке сделаны кирилицей ! - #html5 -  <script type="text/javascript"></script> - type="text/javascript" это лишнее, достаточно <script> </script> - #html5 -  <section class="wrapper"> - <section>? где заголовок <h2-6>? - #html5 -  <ul class="sidebar-menu"> <?php include_once 'menu.php'; ?> </ul> </li> </ul> - оочень странная конструкция, для шаблона!  <section class="my-page"> - ещё <section>? где заголовок <h2-6>? - #html5 - + не о чем не говорящее имя класса! "my-page"(  <img width="100%" ...> - почему стилевые правила в разметке? тем более <img width="100%" ...> не приветствуется в  - #html5 -  ... далее имеются повторяющиеся моменты указанные выше, также своевременность открытия/закрытия тэгов...  <div class="menu"><div class="footer">«Играй в SAMP» Powered by Mihail Rusich ©2016 </div></menu> - нижний колонтитул просто эпик! что это за конструкция?  <divclass="menu"> <divclass="footer"></div> </menu> . итог: приведите в порядок - валидируйте вашу разметку!  Удачи) ....
    • Если вы знаете каким образом увидеть афиши прошедших мероприятий, пожалуйста, смотрите и парсите, но мне кажется сайт не выдает мероприятия из прошлого. Вы можете парсить начиная с сегодняшнего числа и копить эту информацию, на вашем сайте доступ к прошедшим мероприятиям может быть реализован. т.е. вы хотите, чтобы я вам сделал парсер?
      В чем проблемы возникли?
      Для работы с xml документами можно использовать http://simplehtmldom.sourceforge.net/
      Так же весь парсер можно разбить на функции, одна будет например парсить список мероприятий, другая данные по конкретному мероприятию....
        require_once('simple_html_dom.php'); function parser_get_list($p = 1) {     $url = 'https://www.culture.ru/afisha/chelyabinsk?page='.$p.'&limit=24';     $html = file_get_html($url);     if(is_object($html))     {         $items = $html->find('.container_inner .entity-cards_item');         if(is_array($items) && count($items) > 0)         {             foreach($items as $key=>$val)             {                 $url = $val->find('a',0)->href;                 parser_get_page($url);             }             parser_get_list($p+1);         }         else         {             $items = $html->find('.empty-data-message');             if(is_array($items) && count($items) > 0)             {                 //список мероприятий кончился             }             else             {                 //нет ни афиши ни информации о том что их нет - какая-то ошибка возможно                 //можно сделать обработку для них             }         }     } } function parser_get_page($url) {     //проверяем есть ли данная запись у нас, если нет     //аналогично функции parser_get_list, ищем нужные нам данные и записывать их куда-то }  
    • Спасибо большое, но я еще многое чего не понимаю. Да, хочу адаптивно сверстать.
  • Лучшие авторы

    Никто не получал репутацию за неделю

  • Текущие цели пожертвований