Как растянуть div-блок на всю ширину страницы?
Проблема в том, что через комп див блок растягивается правильно, во всю ширину страницы, а через планшет или телефон див растягивается до границы экрана, а при прокрутке вправо или уменьшении масштаба там и остаётся. Скрин в самом низу с примером меньшенного масштаба. Блок отмечен красной стрелкой. Что пробовал и не помогало:
body < width: 100%; height: 100%; >.div
Отслеживать
11 1 1 золотой знак 2 2 серебряных знака 8 8 бронзовых знаков
задан 14 сен 2014 в 14:26
Rammsteinik Rammsteinik
1,182 4 4 золотых знака 19 19 серебряных знаков 48 48 бронзовых знаков
А если вместо min-width — width: 100%;
14 сен 2014 в 14:51
14 сен 2014 в 15:02
что то явно мешает, надо смотреть код и стили. Если нет, то можно попробовать так .div < position: absolute; width: 100% >Только контент нужно будет отодвинуть на высоту этого блока вниз.
14 сен 2014 в 15:14
Абсолют не подходит. При полном экране всё нормально, как браузер уменьшаю, при прокрутке вправо блок остаётся на месте.
14 сен 2014 в 15:33
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Так происходит, когда блоки сайта не помещаются в ширину экрана и остаются за его границами. Одно из следствий — появляется горизонтальный скролл. При этом те блоки, ширина которых была задана как width: 100% — остаются с такой шириной. В итоге вы скроллите вправо, и видите пустую область.
Решить это быстро можно вот так:
body
Этим вы зададите для страницы минимальную ширину, в которую все ваши блоки гарантированно впишутся. И даже если ширина экрана будет недостаточной для отображения всех блоков, и появится горизонтальный скролл — блоки с width: 100% будут отображаться во всю указанную ширину 1000px .
Плюс, полезно бывает задать эту же величину в мета-теге в head :
Таким образом, заходя с мобильного, вы будете видеть всю страницу целиком, максимально «отзумленную».
Как растянуть контейнер на всю ширину css
Есть несколько способов как сделать так, чтобы нужный блок занимал всю ширину видимой части браузера( viewport ), или родительского блока. Если необходимо чтобы элемент занял всю ширину родительского элемента (который в свою очередь может быть задан в px или rem), то нужно просто указать:
.example width: 100%; > Если необходимо что бы элемент занимал всю ширину видимой части браузера, то необходимо выставить:
.example width: 100vw; /* И по аналогии с высотой, если требуется */ height: 100vh; > Как растянуть меню на всю ширину css
Для того чтобы пункты меню заняли равномерное пространство во всю ширину блока, проще всего воспользоваться flexbox , и его свойством justify-content которое равномерно распределяет все элементы по ширине flex-блока. Первый элемент вначале, последний в конце.
Пункт меню 1 ](https://i.ibb.co/cbDkyKt/menu.png "enter image title here") Пункт меню 2 Пункт меню 3 Пункт меню 4
ul /* Добавим фоновый цвет для нашего меню */ background: #33CCFF; /* Выставим высоту */ height: 100px; /* Уберем точки у li элементов */ list-style-type: none; /* добавим отступ, чтобы крайние значения меню не были прижаты в плотную к границам меню */ padding: 10px; /* Используем flexbox */ display: flex; justify-content: space-between; /* Дополнительно сделаем вертикальное выравнивание */ align-items: center; > 
Результат
Как растянуть блок на всю ширину экрана css
Покинул форум
Сообщений всего: 92
Дата рег-ции: Дек. 2009
Помог: 0 раз(а)
Вечер добрый, господа.
Снова проблемка
Нужно растянуть текст на всю ширину блока, он же div, и он же растянут на всю ширину страницы. Не знаю с какой стороны подступиться.
Вот что есть:
CODE (html):
скопировать код в буфер обмена
font-size: 77px;
font-family: tahoma, sans-serif;
font-weight: lighter;
height: 173px;
margin: 0px;
padding: 0px;
margin-top: -115px;
CODE (html):
скопировать код в буфер обмена
justify — конечно же не применим здесь. Подскажите пожалуйста в какую сторону копать?
(Добавление)
Разве что завернуть каждую букву в div или расположить в каждой ячейке одно-строчной таблицы ?
(Добавление)
Пришлось таки брать каждую букву в отдельную ячейку таблицы и растягивать ее на нужную ширину
Отправлено: 21 Декабря, 2010 — 11:04:29
Покинул форум
Сообщений всего: 18
Дата рег-ции: Нояб. 2010
Помог: 0 раз(а)
maksmib пишет:
Нужно растянуть текст на всю ширину блока
Растянуть несколько слов на всю ширину страницы или текст с многими словами?
Если первое то расстояние между буквами (например letter-spacing: 10px;), а второе текст сам растянет блок если у него нет ограничений другими элементами.
И зачем писать margin-top: -115px; по моему это дико
Отправлено: 21 Декабря, 2010 — 13:09:28
Покинул форум
Сообщений всего: 92
Дата рег-ции: Дек. 2009
Помог: 0 раз(а)
Devel Fish пишет:
Растянуть несколько слов на всю ширину страницы или текст с многими словами?
Если первое то расстояние между буквами (например letter-spacing: 10px;), а второе текст сам растянет блок если у него нет ограничений другими элементами.
Первое. Если точнее, фразу из 4х слов.
letter-spacing: 10px; не подходит ..т.к. если у пользователя 30 дюймовый экран, к примеру, у него справа от экрана останется не заполненная текстом область.
Devel Fish пишет:
И зачем писать margin-top: -115px; по моему это дико
а.. ну это задумка такая.. специальная чтобы была видна только половина текста.
Отправлено: 22 Декабря, 2010 — 10:02:32
Покинул форум
Сообщений всего: 8715
Дата рег-ции: Июнь 2009
Помог: 17 раз(а)
maksmib Для осуществления решения предполагаемой вами задачи размещения текстового содержимого на полное значение ширины контейнерного блока возможно использование следующей схемы — первоначально устанавливается минимальный и максимальный параметр расширения контейнерного блока что обеспечивает предотвращение крайнего случае расположения текстовых элеменов Кроме того за счет проведения предварительного анализа текста при генерации целевой HTML-страницы — возможно обрамление выделенных слов в контейнерные элементы и установка разделенных параметров их расширения и представления символов внутри каждого блока — что позволяет сохранить оптическую целостность слов