Задать вопрос
@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. извиняюсь за оформление, пишу с телефона.
  • Вопрос задан
  • 321 просмотр
Комментировать
Подписаться 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;
}
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Frontend Developer
Wanted. • Санкт-Петербург
До 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Сделать 12 видеобэкграундов для выступления детей из готовых футажей
02 нояб. 2024, в 23:36
1000 руб./за проект
Аудио-проект на Arduino для выставки
02 нояб. 2024, в 23:04
80000 руб./за проект
Настройка Mikrotik с приоритезацией трафика для игр
02 нояб. 2024, в 21:53
5000 руб./за проект
Ещё заказы