У меня возникли проблемы с настройкой ширины элемента textarea и использованием прокладки через CSS. Значение padding, по-видимому, изменяет ширину текстового поля, что я бы предпочел не делать.
Это мой HTML-код:
<div id="body">
<textarea id="editor"></textarea>
</div>
И мой код CSS:
#body {
height:100%;
width:100%;
display:block;
}
#editor {
height:100%;
width:100%;
display:block;
padding-left:350px;
padding-right:350px;
}
Однако значения заполнения не работают так, как можно было бы ожидать. Ширина текстового поля увеличивается на 350 пикселей в обоих направлениях, вместо того, чтобы определять пространство между границами элемента и его содержимым.
Я рассмотрел только центрирование текстового поля, установив поля в "0px auto", но я бы хотел, чтобы пользователь все еще мог прокручивать текстовое поле, если мышь витает над одним из пустых полей. По той же причине я не могу добавить еще один div для работы в качестве обертки, так как пользователь не сможет прокручивать по пустым областям, но только по полям без полей.
Помогает ли кто-нибудь?
CSS box model определяет ширину в качестве ширины содержимого, за исключением границы, отступов и полей.
К счастью, у CSS3 есть новое свойство box-sizing, которое позволяет вам изменить это поведение, вместо этого введите прописку и т.д. в указанной ширине, используя:
box-sizing: border-box;
В соответствии со ссылкой выше, большинство современных браузеров (включая IE >= 8) поддерживают это свойство, но в каждом браузере они имеют разные имена.
Указание ширины и полей/отступов в '%' помогает. Вот один пример -
Live @http://jsfiddle.net/ninadpachpute/V2aaa/embedded/result
#body {
background-color:#ccc;
height:100%;
width:100%;
display:block;
}
textarea#editor {
border:none;
width:80%;
height:100%;
margin-left:10%;
margin-right:10%;
}
Ширина, указанная в CSS, не включает заполнение или границу (в соответствии со спецификациями W3C). Я предполагаю, что один из способов сделать это с помощью некоторого JavaScript, который устанавливает ширину #editor в ширину #body минус 700px, но это немного беспорядочно... Не уверен, есть ли способ CSS делать то, что вы хотите здесь. Конечно, вы можете использовать маржу, затем зарегистрировать событие onMouseWheel на #body и работать с этим...
Некоторые браузеры позволяют настроить таргетинг на заполнитель для изменения цвета и т.д., поэтому вы можете также добавить дополнение:
::-webkit-input-placeholder { /* WebKit browsers */
padding: 5px 0 0 5px;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
padding: 5px 0 0 5px;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
padding: 5px 0 0 5px;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
padding: 5px 0 0 5px;
}