Как задать ширину страницы css

Ширина блока по размеру текста

Как сделать так, чтобы ширина блока узнать больше была по размеру текста?

html,body < margin: 0; padding: 0; width: 100%; height: 100%; font-family: 'Raleway', sans-serif; >div < overflow: hidden; >.middle < display:flex; justify-content:center; align-items:center; >.top_part < width: 100%; height: 100%; background: url("http://5gfuture.ru/wp-content/uploads/2017/08/truck-2391940_1280.jpg") center center no-repeat; background-size: cover; >.top_part .top_part_middle < width: 65%; >.top_part .top_part_middle .top_part_left < display: flex; flex-direction: column; width: 80%; >.top_part .top_part_middle .top_part_left .top_part_left_text < display: flex; flex-direction: column; >.top_part .top_part_middle .top_part_left .top_part_left_text h1 < font-size: 50px; font-weight: 600; color: white; text-transform: uppercase; >.top_part .top_part_middle .top_part_left .top_part_left_text a < background-color: #e01f3d; color: white; >.top_part .top_part_middle .top_part_right

 
 
 
 
 
lorem ipsum dolor sit amet consectetur adipiscing
 Узнать больше 
 
 
 
lorem ipsum dolor sit amet consectetur adipiscing
 
 
 
lorem ipsum dolor sit amet consectetur adipiscing
 
 
 
lorem ipsum dolor sit amet consectetur adipiscing
 
 
 
 

Отслеживать

9,323 3 3 золотых знака 29 29 серебряных знаков 57 57 бронзовых знаков

задан 13 сен 2018 в 9:40

Antonio112009 Antonio112009

2,641 1 1 золотой знак 19 19 серебряных знаков 44 44 бронзовых знака

Определить размер страницы и указать в CSS

Пример: пользователь заходит на сайт и сайт определяет высоту и ширину устройства пользователя и делит в ширину div блок на 3 части.

.block < width=calc(его размер/3); >

Можно ли это выполнить каким-то образом?
Отслеживать
задан 1 окт 2022 в 17:00
кот в пальто кот в пальто
15 4 4 бронзовых знака

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Используйте относительные единицы измерения vw и vh

vh - Эквивалентно 1% высоты окна браузера vw - Эквивалентно 1% ширины окна браузера 

следовательно вам нужно

.block < width: calc(100vw / 3); >

Отслеживать
ответ дан 1 окт 2022 в 17:49
1,646 4 4 золотых знака 8 8 серебряных знаков 18 18 бронзовых знаков

• html
• css

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

CSS width 100%. Блок, который занимает всю ширину веб-страницы.

В современной верстке, на веб-страницах часто можно встретить блоки, которые занимают 100% ширины страницы.

Это выглядит вот так:

Давайте разберемся, каким образом можно добиться такого эффекта.

Для примера, давайте рассмотрим следующую ситуацию.

 
Блок, который должен занимать 100% ширины.
 

Смотрим на результат, который получился.

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

В целом хорошо, но по бокам блока видны небольшие отступы, которые портят всю картину. Хотелось бы их убрать.

Первое, что приходит на ум, это присвоить блоку свойство width:100%. Но, это никак не изменит ситуацию. Можете сами в этом убедиться.

 
Блок, который должен занимать 100% ширины.
 

Поэтому свойство width:100% можете смело убирать.

В чем же реальная причина таких отступов?

Дело в том, что блок div, ширину которого мы хотим сделать 100% хранится в двух родительских элементах body и html. По умолчанию, браузеры задают им определенные значения для свойств padding и margin.

Для того, чтобы решить проблему, нужно всего-лишь обнулить эти отступы. Сделать это очень просто:

html, body

Смотрим, как выглядит блок теперь.

Все отлично, пространство, которое было по бокам, было убрано.

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

Как задать минимальную ширину сайта?

Создал страницу для тестирования отображения этой страницы на мобильных устройствах. Указал в head name width=800 , а wrapper min-width: 800px; и width: 100%; . Проверяю на android chrome — браузер не чувствует минимальной ширины wrapper и по умолчанию часть страницы за пределами видимости (пример 1), когда требуется, чтобы браузер понимал, какой минимальной ширины страницу ему нужно показать (пример 2). Как правильно задать минимальную ширину страницы так, чтобы мобильный браузер изначально ее показал, как на примере 2? Пример 1: Пример 2:

html, body < padding: 0; margin: 0; width: 100%; >.wrapper

        
Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.