Были ли проблемы при растягивании блока на ширину 100%

Question

Были ли проблемы при растягивании блока на ширину 100%

Тип вопроса: CSS Вероятность: 10% Категория: Frontend Разработчик

Ответ

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

Пример проблемы:

.parent {
  width: 500px;
  padding: 20px;
}

.child {
  width: 100%; /* Будет 500px, но с padding выйдет за границы */
  padding: 10px;
}

Решение:

Использовать box-sizing: border-box, чтобы padding и border включались в ширину:

.child {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

Для inline-block элементов можно добавить min-width: 100%.

Ответ 18+ 🔞

Ну, ты представляешь, сидишь такой, верстаешь себе спокойно, а тут — бац! — блок твой на width: 100% хуяк, и вылезает за родителя, как говно из прорванной трубы. Охуеть, да? Только что всё было ровненько.

А корень зла, блядь, простой, как три копейки. Родитель-то у тебя ширину явную имеет? Или он там, сука, от контента пляшет? А у самого блока — padding, border или margin есть? Вот они, падлы, и есть! Берешь ты width: 100% — это от внутренней ширины родителя считается, а потом к этой хуйне ещё свои отступы приплюсовываешь. И всё, пиздец, вылез, нахер, на 20 пикселей.

Смотри, какой пиздец может быть:

.parent {
  width: 500px;
  padding: 20px; /* Вот эта мудя! */
}

.child {
  width: 100%; /* О, бля! Думает, будет 500px, а на деле — 500px + его собственные отступы! */
  padding: 10px;
}

И что делать, спрашивается? Волнение ебать!

Первое спасение — box-sizing: border-box. Это, блядь, волшебное свойство. Оно говорит: «Э, сабака сука, считай ширину вместе с padding и border, а не плюсуй их сверху, дебил!». И всё встаёт на свои ебалы.

.child {
  width: 100%;
  padding: 10px;
  box-sizing: border-box; /* Вот, сука, магическая таблетка! Теперь 100% — это ВСЁ, включая отступы. */
}

Второй прикол — для inline-block элементов. Им иногда и box-sizing не всегда помогает, хитрая жопа. Тут можно min-width: 100% впихнуть. Он как бы говорит: «Ладно, хуй с ним, растянись хотя бы на 100%, а больше — иди на хуй».

Короче, суть в чём: когда пишешь width: 100%, всегда смотри, что там с боксингом твоим творится. А то получишь не блок, а говномёт, который всё вокруг засирает.