Задать вопрос
@MuTaToRage
html

Как расширить родительский элемент на всю ширину дочерних элементов со position absolute?

Есть такая структура:
<html>
<div class=content>
    <div class=head></div>
    <div class=main></div>
</div>
<div class=footer></div>
</html>

У main позиция абсолютная. И footer прилипает к header. Делал у content:
height: 100vp;
и
html, body, .content { height:100%; }
Но получается только на высоту экрана а не содержимого content.
P. S. извиняюсь за оформление, пишу с телефона.
  • Вопрос задан
  • 314 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 2
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
самая распространенная ошибка - это лепить абсолютное позиционирование там, где ему не место.
2-я ошибка - это задавать вопрос и не выкладывать код
vp -не работает на яблочных девайсах и в старых браузерах.
Мне кажется надо еще раз хорошо подумать над задачей и реализовать ее адекватными методами
Ответ написан
9 комментариев
9 комментариев
@MuTaToRage Автор вопроса
cd10d669305f402aaf97899163be4928.PNG
Извеняюсь за едкость цветов.
зелёный это header
красный это main
синий это заголовок меню
штрихпунтирный это выпадающее меню при наведении.
если у main позиционирование не absolute то при раскрытии меню блок сдивагется в право. структура меню такая
<div class="menu">
  <div class="header">
    <img src="{$UrnPathTemplate}icon/menu1.png" />
    <span class="title">Drugz A-Z</span>
      <ul>
        <li>Test text1</li>
        <li>Test text2</li>
        <li>Test text3</li>
        <li>Test text4</li>
      </ul>
    </div>
    .......
  </div>

#headmenu .menu .header
{
    float:left;
    min-width: 185px;
    padding-right: 15px;
    padding-top:20px;
    cursor: pointer;
}
#headmenu .menu .header ul
{
    display: none;
    margin-top: 26px;
    width: 100%;
    list-style-type:none;
    padding-left:15px;
}
#headmenu .menu .header:hover
{
    background-color: #efeeee;
    position:relative;
    z-index:10;
}
#headmenu .menu .header:hover > ul
{
    display: block;
}
#headmenu .menu .header ul:hover
{
    display: block;
}
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Верстальщик HTML
MST
от 500 $
Frontend developer / HTML-верстальщик (part-time)
HRScan
от 800 до 1 000 €
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Продвижения инстаграма
26 июн. 2024, в 11:01
1000 руб./за проект
Размещение объявления
26 июн. 2024, в 11:01
500 руб./за проект
Создание видео-рекламы для инстаграма
26 июн. 2024, в 10:59
1500 руб./за проект
Ещё заказы