Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.88/140: Рейтинг темы: голосов - 140, средняя оценка - 4.88
0 / 0 / 0
Регистрация: 15.03.2016
Сообщений: 135

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

22.05.2016, 01:00. Показов 25580. Ответов 5

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

Есть верстка:
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 был в ширину родителя независимо от разрешения.
Миниатюры
Ширина div во всю ширину родителя   Ширина div во всю ширину родителя  
0
Лучшие ответы (1)
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
22.05.2016, 01:00
Ответы с готовыми решениями:

Как растянуть div на всю высоту родителя?
помогите, пожалуйста.

Div на всю ширину экрана
простейшая казалось бы задачка. однако если указывать width 100% он не распостраняется на весь экран! а визуально и слева и справа имеет...

Div не заполняется на всю ширину браузера
Здравствуйте. Скажите пожалуйста. Почему у меня не заполняется div на всю ширину браузера ? Вот код: &lt;style...

5
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2621 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
22.05.2016, 01:25
Neo-X2006, попробуйте добавить к стилям футера:
CSS
1
.footer{width:100%}
1
32 / 32 / 24
Регистрация: 16.04.2015
Сообщений: 219
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>
1
0 / 0 / 0
Регистрация: 15.03.2016
Сообщений: 135
22.05.2016, 11:48  [ТС]
Цитата Сообщение от Kven-M Посмотреть сообщение
Я бы еще попробовал вынести блок row за блок col-md-12
вынес
Цитата Сообщение от Fedor92 Посмотреть сообщение
добавить к стилям футера:
добавил. Но его разнесло до ширины 1920. Если убрать position:absolution; нормально, но он не прилипает к низу
Миниатюры
Ширина div во всю ширину родителя   Ширина div во всю ширину родителя  
0
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
22.05.2016, 12:02
Лучший ответ Сообщение было отмечено Neo-X2006 как решение

Решение

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

Добавлено через 7 минут
Если .footer{width:100%} растягивает футер за пределы контейнера, предполагаю, что у контейнера нет относительного позиционирования. Попробуй добавить:
CSS
1
2
.footer{width:100%}
.container{position:relative}
1
0 / 0 / 0
Регистрация: 15.03.2016
Сообщений: 135
22.05.2016, 12:56  [ТС]
Цитата Сообщение от mrtoxas Посмотреть сообщение
предполагаю, что у контейнера нет относительного позиционирования. Попробуй добавить:
Это сработало
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
22.05.2016, 12:56
Помогаю со студенческими работами здесь

Содержимое DIV в одну строку на всю ширину
Добрый день. Необходимо сделать строку (скрин во вложении). Кнопка &quot;Каталог товаров&quot; имеет фиксированный размер в строке,...

Как растянуть текст на всю ширину div?
Есть такой код: &lt;div style=&quot;background-color: #00FF00; width: 100%; max-width: 800px; text-align: center;&quot;&gt; &lt;p&gt;text&lt;/p&gt; &lt;/div&gt; ...

Как растянуть div на всю ширину сайта?
Можете ли вы мне подсказать как растянуть div на всю ширину сайта, width: 100% пробовал, див растянулся не на всю ширину, слева и справа...

Фон div'a на всю ширину, но не высоту экрана + подвал
Здравствуйте! Я совсем еще начинающий, так что если вопрос очень уж глупый - тапками прошу не кидаться. Суть попыталась передать на...

Как сделать div внутри diva во всю ширину страницы
Здравствуйте &lt;div style=&quot;width:900px; margin:0, auto; height:100px;&quot;&gt; &lt;div&gt;&lt;/div&gt; - Как этот блок, сделать во всю ширину...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Новые блоги и статьи
Семь 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 с альфа-каналом (с прозрачным. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru