спросил
Изменено 3 года, 1 месяц назад
Просмотрено 161 тысяч раз
Как увеличить ширину текстового поля до 100% родительского?
Я пытаюсь установить ширину 100%, но это не работает, он расширяется до 100% страницы, что приводит к сбою макета.
Тут вопрос наглядно.
Пожалуйста, дайте несколько советов.
<дел>
<дел>
Некоторые материалыsssssssss
Блочная модель — это то, о чем должен знать каждый веб-разработчик.
работа с процентами для размеров и пикселями для заполнения/поля просто не работает. Всегда есть разрешение, при котором это выглядит не очень хорошо (например, при задании ширины 90% и отступа/маржи 10 пикселей в div шириной менее 100 пикселей).
Проверьте это (используя код micro.pravi): http://jsbin.com/umeduh/2
<дел> <дел> левый
это самая важная часть CSS: Вам необходимо определить Примечание: CSS: позволяют использовать отступы и поля, не искажая плавающие элементы.
textarea {
дисплей: блок;
ширина: 100%;
-webkit-box-sizing: рамка-бокс;
-moz-box-sizing: рамка-бокс;
box-sizing: граница-коробка;
}
ширину div, содержащего текстовое поле , и когда вы объявляете textarea , вы можете установить . на ширину 
main > textarea : наследовать . .main > textarea означает
.wrapper {
дисплей: таблица;
ширина: 100%;
}
.левый {
ширина: 20%;
фон: #cccccc;
отображение: таблица-ячейка;
}
.основной {
ширина: 80%;
фон: серый;
дисплей: встроенный;
}
.main> текстовое поле {
ширина: наследовать;
}
1
HTML:
<дел>
CSS:
тело {
ширина:100%;
граница: 1px сплошной черный;
радиус границы: 5px;
}
#левый{
ширина: 20%;
высота: 400 пикселей;
плыть налево;
граница: 1px сплошной черный;
дисплей:блок;
}
#содержание{
ширина: 78%;
высота: 400 пикселей;
плыть налево;
граница: 1px сплошной черный;
выравнивание текста: по центру;
}
текстовая область
{
верхняя граница: 100 пикселей;
ширина: 98%;
}
ДЕМО: ЗДЕСЬ
1Я бы сделал так:
HTML:
<дел>
боковая панель здесь
<дел>
<текстовое поле>
CSS:
.wrapper{ дисплей: блок; ширина: 100%; переполнение: скрыто; } .сторона{ плыть налево; ширина: 20%; } .основной{ поплавок: справа; ширина:80%; } .такласс{ дисплей:блок; ширина:100%; набивка: 2%; -webkit-box-sizing: рамка-бокс; -moz-box-sizing: рамка-бокс; box-sizing: граница-коробка; }
Попробуйте это. Добавьте это на свою страницу
wrapper{
дисплей: блок;
ширина: 100%;
переполнение: скрыто;
}
.сторона{
плыть налево;
ширина: 20%;
}
.основной{
поплавок: справа;
ширина:80%;
}
.такласс{
дисплей:блок;
ширина:100%;
набивка: 2%;
-webkit-box-sizing: рамка-бокс;
-moz-box-sizing: рамка-бокс;
box-sizing: граница-коробка;
}