Запретить выходить блоку за границы родительского блока.

"блок выходит за пределы" - как решить? Нам нужно : "Запретить выходить блоку за границы родительского блока". В примерах разберем div, textarea и картинку.

Подробно о выходе блоков за пределы родительского блока.

1. Блок выходит за пределы родительского блока.
2. Блок выходит за пределы родительского блока - 2.
3. Textarea выходит за пределы блока.
4. Выход картинки за пределы родительского блока.

Блок выходит за пределы родительского блока.

Нам нужно смоделировать - это самое "Блок выходит за пределы родительского блока."

У нас будут два div

Html:

<div class=first>
<div class=second>div</div>
</div>

+ стили:

Css:

<style>
div.first {
background: #6cd81c;
width: 300px;
height: 50px;
}
div.second {
width: 100%;
padding: 0 50px;
background: aliceblue;
border: 1px solid;
}
</style>

Пример блока выходящего за пределы блока:

Если вы прочитали стили, то вы увидели, что наш дочерний блок выходит по ширине за пределы родительского блока на 100px(см. padding 0 50px)

div

И чтобы вот этот выход за пределы блока ликвидировать, то к классу "second" добавим "box-sizing: border-box;"

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

Результат - блок, больше не выходит за пределы родительского блока:

div



Блок выходит за пределы родительского блока - 2.

Еще один пример способа -запрета выхода дочернего блока за пределы родительского...

нам опять понадобится два div

Html:

<div class=first3>
<div class=second3>div</div>
</div>

Стили... смотри выше пунктом.... для данного примера они аналогичные.

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

div

И далее.. второму блоку присвоим свойство display со значением table-cell

.second4 {
width: 600px;
padding: 0 50px;
background: aliceblue;
border: 1px solid;
display: table-cell; }


Смотрим результат:

Блок больше не выходит за пределы родительского блока:

div



Textarea выходит за пределы блока.

Вообще... эта страница родилась по мотивам "Textarea выходит за пределы блока."... и множество "Textarea" находятся у меня в админке и эта история... как тот сапожник без сапог...

Ну как-же этот долбаный "Textarea" вылазит за пределы... что только не придумывай...

делаешь width 100%

И малейший padding - ... опять все кривое...

Короче!

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

Давайте приведем пример "Textarea", который вылазит за пределы родительского блока.

Html:

<div class=first>
<Textarea>Textarea</Textarea>
</div>

Css:


.first {
background: #6cd81c;
width: 300px;
height: 50px;
}
.first textarea {
width: 100%;
padding: 0 20px;
}

Textarea

И поступаем аналогично, как и в первом пункте...

Html:

<div class=first>
<textarea class=textarea>Textarea</textarea >
</div>

Css:


.first textarea.textarea {
width: 100%;
padding: 0 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Textarea больше не выходит за пределы родительского блока...

Смотрим результат :

Textarea




Выход картинки за пределы родительского блока.

Далее... картинка выходит за пределы блока...

Для примера нам понадобится div в который поместим img с адресом...

<div class=first>
<img src="https://dwweb.ru/_data/img/background/morning.png">
</div>

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



Возьмем этот же пример и зададим нашей картинке "style="max-width: 100%""

<div class=first>
<img src="https://dwweb.ru/_data/img/background/morning.png" style="max-width: 100%">
</div>

Смотрим результат -картинка не вышла за пределы блока ппо ширине.



Чтобы картинка не заходила за пределы блока по высоте, то применяем

style="max-height: 100%" Здесь мы видим, на примере, что картинка вписалась в размеры по ширине и картинка масштабировалась пропорционально. Здесь мы не преследовали цель вписать картинку в блок - смотри здесь