Ширина div во всю ширину родителя

@Neo-X2006 · Регистрация: 15.03.2016

Студворк — интернет-сервис помощи студентам

Всем привет!

Есть верстка:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
 
</head>
<body>
<div class="container" id="wrapper">
    <div id="topmenu">
     
    </div>
    <div class="contentarea">
        <div class="row">
            <div class="col-md-6">.col-md-6</div>
            <div class="col-md-6">.col-md-6</div>
        </div>
    </div>
    <div class="footer">
        <div class="container">
            <div class="col-md-12">
                <div class="row">col-md-12</div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

div footer имеет такие стили:

CSS
1
2
3
4
5
6
7
.footer {
  margin-bottom: 10px;
  position: absolute;
  bottom: 0;
  height: 100px;
  background-color: #58E400;
}

На 1-ом скрине выглядит нормально при ширине >=768px, как мне нужно, во всю ширину родительского блока, однако стоит уменьшить ширину меньше чем 768, все сбивается в левый угол. Подскажите почему так происходит? Мне нужно, чтоб блок footer был в ширину родителя независимо от разрешения.

@Fedor92 · 22.05.2016, 01:25

Neo-X2006, попробуйте добавить к стилям футера:

CSS
1
.footer{width:100%}

@Kven-M · 22.05.2016, 10:12

Я бы еще попробовал вынести блок row за блок col-md-12

HTML5
1
2
3
4
5
6
7
<div class="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-12">col-md-12</div>
            </div>
        </div>
    </div>

@Neo-X2006 · 22.05.2016, 11:48 **[ТС]**

Сообщение от Kven-M

Я бы еще попробовал вынести блок row за блок col-md-12

вынес

Сообщение от Fedor92

добавить к стилям футера:

добавил. Но его разнесло до ширины 1920. Если убрать position:absolution; нормально, но он не прилипает к низу

@mrtoxas · 22.05.2016, 12:02

А какие стили по футеру прописаны в @media?

Добавлено через 7 минут
Если .footer{width:100%} растягивает футер за пределы контейнера, предполагаю, что у контейнера нет относительного позиционирования. Попробуй добавить:

CSS
1
2
.footer{width:100%}
.container{position:relative}

@Neo-X2006 · 22.05.2016, 12:56 **[ТС]**

Сообщение от mrtoxas

предполагаю, что у контейнера нет относительного позиционирования. Попробуй добавить:

Это сработало

Новые блоги и статьи Все статьи Все блоги /
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .

Ширина div во всю ширину родителя

Решение