Ширина textarea 100% и внутренний padding — решение есть!

Автор: Aport Пятница, Январь 30th, 2015 Нет комментариев

Рубрика: Разное

Проведем ряд опытов и выясним как себя ведет ширина textarea 100% и внутренний padding, без и c применением DOCTYPE

Проведем ряд опытов и выясним как себя ведет ширина textarea 100% и внутренний padding c применением DOCTYPE:

<div style=»border:1px dotted #009999; padding:5px; width:45%»>

<textarea style=»border:1px dotted #FF0000;
width:100%; padding:5px; overflow:auto»></textarea>
</div>

Как вы видите TEXTAREA вышел за родительский DIV, это особенность применения DOCTYPE. Теперь шустро прочти Вывод 1


К сожалению, добавлением 3-го внешнего DIV-а данная проблема тоже не решается:

<div style=»border:5px dotted #CCC; width:45%;»>
<div
style=»margin:7px; padding:5px; border:2px dotted #009999″>

<textarea style=»border:1px
dotted #FF0000; width:100%; padding:5px; overflow:auto»></textarea>

</div>
</div>


Но проблему можно решить указав внешний margin 17px установленный казалось бы больше нормы:

<div style=»border:5px dotted #CCC; width:45%;»>
<div
style=»border:2px dotted #009999; margin: 5px 17px
5px 5px»>
<textarea
style=»border:1px dotted #FF0000; width:100%; padding:5px; overflow:auto»></textarea>
</div>
</div>

Почему 17 читай в выводе 2


А теперь примеры с применением TABLE, для тех, кто думает что через TABLE должно отображать верно:

<table border=»0″ cellpadding=»0″ cellspacing=»0″
style=»border:5px dotted #CCC; width:45%»>
<tr>
<td
style=»border:1px dotted #009999; padding:5px»>
<textarea
style=»border:1px dotted #FF0000; width:100%; padding:5px; overflow:auto»></textarea>
</td>
</tr>
</table>


И опять проблема исчезает, если указать внешний margin:17px (казалось бы больше нормы):

<table border=»0″ cellpadding=»0″ cellspacing=»0″
width=»45%» style=»border:5px dotted #CCC»>
<tr>
<td>
<div
style=»margin: 5px 17px 5px 5px; border:2px dotted #009999″>
<textarea
style=»border:1px dotted #FF0000; width:100%; padding:5px; overflow:auto»></textarea>
</div>
</td>
</tr>
</table>



И на последок, пример под названием — спрячем лишнее:

9876543210

<div style=»overflow: hidden; width:
30px; border:1px dotted #009999;padding:5px»>
<div
style=»border:1px dotted #FF0000; width:100%; margin-right:15000px»>9876543210</div>
</div>

Как видите, главным моментом здесь является overflow:
hidden
, который дочерним элементам не позволяет показывать все то, что является
по ширине больше чем основной родительский! При этом, margin-right:15000px никак не влияет на горизонтальный скроллбар


Выводы использования DOCTYPE:

1. если внутреннему элементу (например TEXTAREA) указать 100%, то можете
считать что ширину он позаимствует у своего родителя (например DIV) без
учета pading, но с учетом margin. При этом, если внутреннему элементу (например
TEXTAREA) указать такой же margin что и у родительского элемента (например DIV),
то он сработает, но никак не повлияет на него (на DIV) и родительский элемент
по ширине останется такойго же размера! Для интереса показываю следующий тест:

<div style=»border:2px dotted #009999; padding:5px; width:45%»>

<textarea style=»border:1px dotted #FF0000;
width:100%; padding:5px; overflow:auto; margin-right:1234px«>у
данного элемента TEXTAREA margin-right:1234px, обратите внимание на родительский DIV — ширина осталась прежней, но появился горизонтальный скроллбар у окна браузера!</textarea>
</div>

2. число 17 находится по сумме отступов для DIV — справа, для TEXTAREA — слева! Считать будем так:

DIV с margin-right:5px + TEXTAREA с padding-left:5px + TEXTAREA с
padding-right:5px +  TEXTAREA border-left:1px +  TEXTAREA border-right:1px  = 17px

Кому описанного выше было недостаточно, советую почитать об этом более детально»

Поздравляю Вас, теперь Вы гуру DOCTYPE, а особо любопытным можно взглянуть на примеры описанные выше, но уже без применения DOCTYPE:

 

Источник: yapro.ru

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты