С Новым годом! Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.60/55: Рейтинг темы: голосов - 55, средняя оценка - 4.60
2 / 2 / 0
Регистрация: 07.04.2016
Сообщений: 277

Как сделать блок на всю ширину экрана

19.11.2016, 08:36. Показов 10158. Ответов 9
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
HTML5
1
2
3
4
5
    <div тут в стилях фиксированная ширина>
        <div></div>
        <div>100% по ширине браузера</div>
    </div>
</div>
Как сделать 100% по ширине окна браузера вложенный блок, когда есть фиксированная ширина у родителя.
0
Лучшие ответы (1)
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
19.11.2016, 08:36
Ответы с готовыми решениями:

Как сделать текст с центрированием по середине и фоном на всю ширину экрана?
Как сделать текст с центрированием по середине(по вертикали и горизонтали) и фоном на всю ширину экрана? Я попробовал, но не вышло ...

Как сделать блок на всю ширину окна браузера
У меня возникла проблема с размерами &lt;div&gt; Не получается сделать на всю 100% ширину окна браузера, вначале описывал в css размеры ...

Сделать фон блока на всю ширину экрана
Добрый день. По поиску нашел несколько подобных тем, но к сожалению, на чистом html все работает, а на существующем сайте не выходит...

9
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
19.11.2016, 09:59
sergei2210, сохраняя блок в общем потоке - никак. Вы хотите фон вынести?
0
2 / 2 / 0
Регистрация: 07.04.2016
Сообщений: 277
19.11.2016, 10:31  [ТС]
Нет это планируется блок ,а именно карта

как тут http://official-ubn-ural.ru/%D... D1%81.html

Добавлено через 3 минуты
Я смотрел там код, и там позиция абсолют есть но не понятно все равно как это сделано
0
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
19.11.2016, 11:08
Лучший ответ Сообщение было отмечено sergei2210 как решение

Решение

В код этого сайта лучше не заглядывать, там все на позиционировании сделано.
Как один из вариантов решения:
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.content {
  width: 900px;
  margin: 0 auto;  
}
 
.content.wide {
  width: 100%;
}
 
.block1 {
  height: 100px;
  background-color: #ccc;
}
 
.block2 {
  height: 100px;
  background-color: #eee;
}
HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class="wrapper">
  <div class="content">
    <div class="block1">Default content</div>
  </div>
  <div class="content wide">
    <div class="block2">Wide content</div>
  </div>
  <div class="content">
    <div class="block1">Default content</div>
  </div>
</div>
1
2 / 2 / 0
Регистрация: 07.04.2016
Сообщений: 277
19.11.2016, 11:51  [ТС]
А почему content wide игнорирует 900px
0
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
19.11.2016, 12:08
Он не игнорирует. У селектора .content.wide "вес" больше, чем у .content. Почитайте про специфичность селекторов.
1
2 / 2 / 0
Регистрация: 07.04.2016
Сообщений: 277
19.11.2016, 12:35  [ТС]
mrtoxas, вес больше потому что они ниже?
0
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
19.11.2016, 12:38
sergei2210, вес = приоритетность = специфичность. Почитайте про специфичность селекторов и вам, предположительно, все станет понятно.
0
2 / 2 / 0
Регистрация: 07.04.2016
Сообщений: 277
19.11.2016, 12:41  [ТС]
mrtoxas, я был уверен что вы так ответите, но... ладно, скажите не правильное предположение что вес больше потому что он ниже или нет?
0
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
19.11.2016, 12:42
sergei2210, нет
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
19.11.2016, 12:42
Помогаю со студенческими работами здесь

Как сделать так, чтобы картинки на сайте (обложка журнала и скрин youtube) были автоматически на всю ширину экрана и мен
Как сделать так, чтобы картинки на сайте (обложка журнала и скрин youtube) были автоматически на всю ширину экрана и меняли размер при...

Как сделать на css, если второго блока справа нет, то слева первый блок расширяется на всю ширину
Как сделать на css, если второго блока (div) справа нет, то слева первый блок (div) расширяется на всю ширину. Вот css-код: ...

Как растянуть подменю на всю ширину экрана
Требуется растянуть блок с подменю на всю ширину экрана &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta...

Полоса ссылками и меню на всю ширину экрана. Как реализовать?
Добрый день. Подскажите пожалуйста, как реализовать данную шапку (полосу ссылками и полосу с меню) на всю ширину экрана. На рисунке...

Несколько дивов в ряд, как их растянуть на всю ширину экрана
Сайт пример, на котором пробую - http://testsite482.vacau.com/6/ Идет несколько div-ов в ряд. Один с синим фоном, другой с зеленым,...


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

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
Новые блоги и статьи
Модель микоризы: классовый агентный подход
anaschu 02.01.2026
Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути
Programma_Boinc 01.01.2026
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост.
Programma_Boinc 28.12.2025
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / **********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / **********/ gallery/ bKBkQFf Пост отсюда. . .
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США.
Programma_Boinc 26.12.2025
Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка.
Programma_Boinc 23.12.2025
Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru