Разное

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

11.08.2023

css — width 100% который расширяется по содержимому

Вопрос задан

Изменён 4 года 1 месяц назад

Просмотрен 252 раза

Всем привет, верстаю шаблон, в нём есть «корневой div»(id:indexRootOut) который должен растягиваться на всю ширину экрана, внутри есть два div’a id:indexTopRow1 и id:indexTopRow2, div id:indexTopRow1 содержит три элемента : лого, поиск и две кнопки(вход и рега). При слишком узком экране, все элементы сжимаются до минимальной ширины(у id:indexRootOut min-width: 800px), а при широком экране — растягиваются до максимальной(у id:indexTopInn max-width: 1280px). Всё работает нормально когда экран достаточно широкий, но когда ширина экрана меньше минимальной(800px) то получается вот это :

Flex’ами пробовал, результат аналогичный, div id:indexTopUserMenuOut должен изменять свою ширину в зависимости от ширины кнопок(т.

к. на разных языках длина слов «вход» и «рега» будет отличаться)

<!doctype html>
<html lang="ru">
<head>
<base href="/" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#c21616" />
<meta name="Description" content="">
<title></title>
</head>
<body>
<div>
<div>
<div>
<div>
<div>
<div><a href=""></a></div><!--indexTopLogo/-->
<div>
<input type="text" value="">
<div>найти</div>
</div><!--indexTopFindOut/-->
<div><!--
--><div>вход</div><!--
--><div>регистрация</div>
</div><!--indexTopUserMenuOut/-->
</div><!--indexTopRow1/-->
<div></div><!--delim-->
<div>
<div>
<div><a href="">Популярное</a><div>Популярное</div></div><!--/indexTopMenuElem-->
<div><a href="">Все категории</a><div>Все категории</div></div><!--/indexTopMenuElem-->
<div><a href="">Текст</a><div>Текст</div></div><!--/indexTopMenuElem-->
<div><a href="">Текст</a><div>Текст</div></div><!--/indexTopMenuElem-->
<div><a href="">Текст</a><div>Текст</div></div><!--/indexTopMenuElem-->
<div><a href="">Текст</a><div>Текст</div></div><!--/indexTopMenuElem-->
<div><a href="">Текст</a><div>Текст</div></div><!--/indexTopMenuElem-->
<div><a href="">Текст</a><div>Текст</div></div><!--/indexTopMenuElem-->
<div><a href="">Текст</a><div>Текст</div></div><!--/indexTopMenuElem-->
<div><a href="">Текст</a><div>Текст</div></div><!--/indexTopMenuElem-->
<div><a href="">Текст</a><div>Текст</div></div><!--/indexTopMenuElem-->
</div><!--indexTopMenuOut/-->
</div><!--indexTopRow2/-->
</div><!--indexTopInn/-->
</div><!--indexTopOut/-->
</div><!--indexRootInn/-->
</div><!--indexRootOut/-->
</body>
</html>

https://jsfiddle. net/apd4q5kc/2/

  • css
  • html
1 

#indexTopFindOut {
    display: table-cell;
    position: relative;
    min-width: auto;
    padding-right: 30px;
}

https://jsfiddle.net/3c17ua9t/

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Как изменить ширину элемента. Свойство width — журнал «Доктайп»

CSS-свойство width определяет ширину элемента на странице. Оно позволяет управлять размером элемента и адаптировать его под разные размеры экрана.

Свойство width записывается так:

selector {
  width: значение;
}

Ширина может быть автоматической — если её не указать, то она будет иметь значение

auto. В этом случае браузер сам решит, какую ширину установить элементу на основе размеров родительского элемента и содержимого.

Если вы хотите управлять шириной, укажите значение — определённую вами ширину элемента. Тогда она будет постоянной или будет меняться в зависимости от всего вокруг на странице. Можно использовать единицы измерения — например, px, %, em, rem.

Вот так — в пикселях, тогда ширина будет постоянной. В этом случае — 200 пикселей.

p {
  width: 200px;
}

А так — в процентах, тогда ширина будет меняться при изменении размеров окна. В этом случае — 50% от ширины родительского элемента.

p {
  width: 50%;
}

В любом варианте к ширине нужно относиться внимательно, чтобы всё сошлось с макетом.

👉 Если пока не понимаете, что такое p и зачем здесь фигурные скобки — прочитайте о селекторах и пройдите тренажёр по CSS.

Для чего использовать свойство

width

Один из вариантов — чтобы ограничить ширину текстового блока и улучшить читаемость на больших экранах. Например, когда вы делаете блог и хотите, чтобы текст не растягивался на всю ширину экрана. Как на этой странице.

Вот так мы стилизуем элемент с шириной 50%, который находится по центру экрана.

p {
  width: 50%;
  margin: auto;
}
Обратите внимание на ширину и на пустые поля справа и слева

Относительные единицы измерения помогают создавать адаптивные страницы. Попробуйте сами — контейнер будет тянуться вместе с окном браузера.

.container {
  width: 100%;
}

Другой вариант использования — создать сетку на основе флексбоксов с фиксированными размерами колонок.

.flex-container {
  display: flex;
}
.flex-item {
  width: 200px;
}

Это очень простой пример сеток, но если интересно, прочитайте наше пошаговое рукововодство по созданию адаптивных сеток.

С шириной всё вообще непросто — иногда с непривычки могут произойти странные ситуации, из-за которых придётся долго гуглить. Давайте о них поговорим.

Элемент на странице шире, чем вы задумали

Виновато свойство box-sizing, которое по умолчанию имеет значение content-box.

Почему так. Когда вы задаете ширину элемента с помощью свойства width, она применяется только к содержимому элемента и не учитывает его отступы, поля (padding и margin) и границы (border).

Это может привести к тому, что общая ширина элемента будет больше, чем ожидалось.

Например, у нас есть такой элемент с классом box:

<div>Контент</div>

И мы применяем следующие стили — ширина 100 пикселей, отступы по 10 пикселей со всех сторон и вдобавок пятипиксельную границу.

.box {
  width: 100px;
  padding: 10px;
  border: 5px solid black;
}

Тогда вспоминаем математику и считаем — общая ширина элемента с заданной шириной 100px будет на самом деле равна 130px.

100px + 2 × 10px (отступы) + 2 × 5px (границы) = 130px

И правда:

Как починить. Нужно включить отступы и границы в заданную ширину элемента. Для этого используйте свойство

box-sizing со значением border-box:

.box {
  width: 100px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
}

Теперь общая ширина элемента будет равна 100px, так как отступы и границы будут включены в указанную ширину. Такое поведение следует учитывать при вёрстке и подготовке макетов, чтобы в результате не оказалось непредвиденных сюрпризов.

Ширина элемента больше ширины родителя

Если ширина нашего элемента случайно оказалась больше, чем у родительского, то он не вместится. И будет как-то так:

Элемент выходит за пределы родительского

Создаём два вложенных элемента с классами parent и child.

<div>
  <div>Элемент</div>
</div>

И стилизуем их. У parent ширина 100 пикселей, а у child — 200.

.parent {
  width: 100px;
  border: 1px solid black;
}
.child {
  width: 200px;
  background-color: lightblue;
}

Выше вы уже видели, что произойдёт в этом случае — элемент child с синим фоном будет выходить за пределы родительского элемента с рамкой.

Конечно, иногда так поступают специально — например, чтобы иллюстрации в блоге выходили за пределы колонки с текстом и были покрупнее.

Здесь иллюстрации намеренно шире колонки, чтобы дать возможность разглядеть подробности скриншота

Хотя если указать только width без ограничений, то при уменьшении окна картинка не вместится.

Как починить. Чтобы избежать таких ситуаций, используйте относительные единицы измерения (например, проценты) или свойства min-width, max-width для ограничения минимальной и максимальной ширины.

Например, вы можете установить максимальную ширину для дочернего элемента, чтобы он не превышал ширину родителя:

.child {
  max-width: 100%;
  background-color: lightblue;
}
С max-width: 100% элемент не выходит за пределы родительского

Теперь дочерний элемент не будет выходить за пределы родительского элемента, даже если его ширина увеличивается.

Ну и не забывайте тестировать сайты и проверять их в разных браузерах — это важный навык для всех веб-разработчиков в любом году.

👉 Все браузеры поддерживают свойство width, так что смело пользуйтесь.

Материалы по теме

  • Не шириной единой — свойство height ещё запутаннее, но тоже важное
  • Чем отличаются margin и padding (и как их больше никогда не перепутать)
  • Как создавать адаптивные сетки

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Что делает «width: 100%» в CSS?

Луи Лазарис / /

Обновлено:

Похоже, это одна из самых простых вещей для понимания в CSS. Если вы хотите, чтобы блочный элемент заполнил все оставшееся пространство внутри своего родителя, то это просто — просто добавьте width: 100% в объявление CSS для этого элемента, и ваша проблема решена.

Не так быстро. Это не так просто. Я уверен, что CSS-разработчики всех уровней квалификации пытались сделать что-то похожее на то, что я только что описал, с причудливыми результатами, которые в конечном итоге приводили к тому, что они ломали голову и пожимали плечами, прибегая к экспериментам с абсолютной шириной, пока мы не найдем то, что подходит. Это всего лишь одна из тех вещей в CSS, которые кажутся простыми для понимания (и на самом деле так и должно быть), но иногда это не так — из-за того, как проценты работают в CSS.

Используйте

box-sizing: border-box

Первоначально это был старый пост, в котором не учитывалось возможное использование свойства border-box . Если вы добавите следующее в начало вашего файла CSS, вы сможете избежать многих проблем, связанных с использованием 100% ширины для ваших элементов:

 * {
  box-sizing: граница-коробка;
}

Это гарантирует, что отступы учтены в ширине ваших элементов. Конечно, не во всех проектах это используется, и это не исправляет того факта, что отступы могут влиять на положение внутреннего элемента. Но в большинстве случаев я настоятельно рекомендую использовать отступы внутри блока, а не поля, чтобы избежать этой проблемы.

Блоки не нуждаются в 100%-ной ширине

Когда мы поймем разницу между блочными элементами и встроенными элементами, мы узнаем, что блочный элемент (такой как

,

, или

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

    Большинство разработчиков CSS довольно хорошо понимают эту концепцию, но я подумал, что было бы полезно указать ее здесь в качестве введения к объяснению того, как работают проценты при использовании на ширина свойство.

    Что

    ширина: 100% На самом деле означает

    Когда вы задаете элементу ширину 100% в CSS, вы, по сути, говорите: «Сделайте область содержимого этого элемента точно равной явной ширине его родителя — но только если его родитель имеет явную ширину». Итак, если у вас есть родительский контейнер шириной 400 пикселей, дочерний элемент с шириной 100% также будет иметь ширину 400 пикселей и по-прежнему будет зависеть от полей, отступов и границ — поверх настройки ширины 100%. . Изображение ниже пытается проиллюстрировать это:

    И, конечно, точно такое же правило применимо к любому процентному значению. Область содержимого будет представлять собой процент от явно заданной ширины родителя.

    ДОБАВЛЕНО ПРИМЕЧАНИЕ. Ширина области содержимого дочернего элемента будет равна ширине области содержимого родителя, но не будет перемещаться за пределы родительской области, если на нее не влияют собственные отступы или поля. Спасибо комментарию Фабио Брендолина за разъяснение этого.

    Нужно ли его когда-нибудь использовать?

    Во многих случаях применение width: 100% к блочному элементу либо не нужно, либо приведет к нежелательным результатам. Если вы используете padding для внутреннего элемента и используете box-sizing : border-box , тогда вы будете в безопасности.

    Один из случаев, когда вы можете использовать ширину : 100% , — это когда элемент наследует заданное значение ширины, которое вы хотите переопределить. Но даже в этом случае лучшим вариантом будет использование «width: auto», которое используется по умолчанию для блочных элементов.

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

    Высота работает одинаково (во всех браузерах!)

    И этот небольшой урок напоминает об одной из неприятных вещей в макетах CSS — что вы не можете задать элементу высоту, которая заполняет его родительский элемент, если только родительский элемент дается (как вы уже догадались) явная настройка высоты. Разница лишь в том, что в этом случае «авто» работать не будет, а вместо него требуется «высота: 100%».

    Самое замечательное то, что все браузеры (даже IE6 и IE7) используют высоту в процентах одинаково (за исключением ошибок IE), поэтому, если вы явно задаете высоту родительского элемента, дочерний элемент заполняет высоту до 100 % как и ожидалось.

    Что вы думаете? Вы когда-нибудь неправильно истолковывали ширину в процентах и ​​отказывались от их использования, потому что они не работали так, как вы ожидали? Я знаю, что делал это, и мне потребовалось довольно много времени, чтобы понять это правильно и лучше понять их.

    html — разница между шириной auto и шириной 100 процентов

    спросил

    Изменено 10 месяцев назад

    Просмотрено 220 тысяч раз

    Ранее мое предположение о width: auto заключалось в том, что ширина устанавливается равной ширине содержимого. Теперь я вижу, что он занимает всю ширину родителя.

    Кто-нибудь может описать разницу между ними?

    • HTML
    • CSS
    1

    Ширина авто

    Начальная ширина блочного элемента, такого как div или p, устанавливается автоматически. Это заставляет его расширяться, чтобы занять все доступное горизонтальное пространство внутри содержащего его блока. Если у него есть какие-либо горизонтальные отступы или границы, их ширина не добавляется к общей ширине элемента.

    Ширина 100%

    С другой стороны, если вы укажете width:100%, общая ширина элемента будет равна 100% содержащего его блока плюс любые горизонтальные поля, отступы и границы (если только вы не использовали box-sizing:border-box, в котором случае добавляются только поля к 100%, чтобы изменить способ расчета его общей ширины). Это может быть то, что вы хотите, но, скорее всего, это не так.

    Чтобы увидеть разницу, посмотрите на эту картинку:

    Источник

    4

    • ширина: авто; будет стараться изо всех сил поддерживать элемент той же ширины, что и его родительский контейнер, когда дополнительное пространство добавляется из полей, отступов или границ.

    • ширина: 100%; сделает элемент такой же ширины, как родительский контейнер. Дополнительный интервал будет добавлен к размеру элемента независимо от родителя. Обычно это вызывает проблемы.

    2

    Ширина 100% : Это сделает ширину контента равной 100%. поля, границы, отступы будут добавлены к этой ширине, и элемент будет переполнен, если какой-либо из них добавлен.

    Ширина авто : Он будет соответствовать элементу в доступном пространстве, включая поля, границы и отступы. пространство, оставшееся после настройки полей + отступов + границы, будет доступно по ширине / высоте.

    Ширина 100% + размер коробки: рамка рамки: Он также будет соответствовать элементу в доступном пространстве, включая границы, отступы (поля заставят его переполнять контейнер).

    Речь идет о полях и границах. Если вы используете width: auto , а затем добавите границу, ваш div не станет больше, чем его контейнер. С другой стороны, если вы используете ширину : 100% и некоторую границу, ширина элемента будет равна 100% + границы или поля. Для получения дополнительной информации см. это.

    Пока значение ширины равно auto, элемент может иметь горизонтальные поля, отступы и границы, не становясь шире своего контейнера (если, конечно, сумма левого поля + ширина левой границы + левое отступы + отступы -right + border-right-width + margin-right больше контейнера). Ширина его блока содержимого будет равна тому, что останется после вычитания полей, отступов и границ из ширины контейнера.

    С другой стороны, если вы укажете width:100%, общая ширина элемента будет равна 100% содержащего его блока плюс любые горизонтальные поля, отступы и границы (если вы не использовали box-sizing:border-box, в в этом случае к 100% добавляются только поля, чтобы изменить способ расчета его общей ширины). Это может быть то, что вы хотите, но, скорее всего, это не так.

    Источник:

    http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width200/

    Начальная ширина блочного элемента, такого как div или p, устанавливается автоматически.

    Используйте width:auto для отмены явно заданной ширины.

    Если вы укажете width:100%, общая ширина элемента будет равна 100% содержащего его блока плюс любые горизонтальные поля, отступы и границы.

    Итак, в следующий раз, когда вы обнаружите, что устанавливаете ширину элемента уровня блока на 100%, чтобы он занимал всю доступную ширину, подумайте, действительно ли вы хотите установить для него значение auto.

    Когда мы говорим

     width:auto;

    ширина никогда не будет превышать общую ширину родительского элемента. Максимальная ширина — это его родительская ширина. Даже если мы добавим границы, отступы и поля, содержимое самого элемента станет меньше, чтобы освободить место для границ, отступов и полей. В случае, если пространство, необходимое для границы + заполнения + поля, больше, чем общая ширина родительского элемента, тогда ширина содержимого станет равной нулю.

    Когда мы говорим

     width:100%;

    ширина содержимого элемента станет равной 100% от родительского элемента, и с этого момента, если мы добавим рамку, отступы или поля, это приведет к тому, что дочерний элемент превысит ширину родительского элемента, и он начнет выходить за пределы родительского элемента.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *