Как расширить текстовое поле шириной до 100% от родителя?
Я стараюсь ширина 100%, но она не работает, она расширяется до 100% страницы, что аварии макет.
Тут вопрос в визуальным способом.
Просьба дать некоторые подсказки.
в
<div>
<div style="width:20%; float:left;">
<p>Some Contentsssssssssss</p>
</div>
<div style="float:left;width:80%;">
<textarea style="width:100%;"></textarea>
</div>
<div style="clear:both;"></div>
</div>
в в
Необходимо определить, ширину элемента div, содержащего текстовое поле
и когда вы объявляете текстовое поле
, затем вы можете установить .Главная > в текстовое поле
иметь ширина: наследование
.
Примечание: .Главная > в текстовое поле
означает <работает>
внутри элемента с классом=то"Главное"`.
Вот [рабочего раствора][1]
HTML-кода:
<div class="wrapper">
<div class="left">left</div>
<div class="main">
<textarea name="" cols="" rows=""></textarea>
</div>
</div>
Ус:
.wrapper {
display: table;
width: 100%;
}
.left {
width: 20%;
background: #cccccc;
display: table-cell;
}
.main {
width: 80%;
background: gray;
display: inline;
}
.main > textarea {
width: inherit;
}
Модель коробки является то, что каждый веб-разработчик должен знать об. работать с процентами в размерах и пикселях для обивка/маржа просто не't работа. Там всегда является разрешение, при котором он не'т выглядеть хорошо (например, ширину 90% и обивка/маржа 10 ПКС в DIV с шириной в 100 пикселей).
Проверьте (используя микро.Прави's код): http://jsbin.com/umeduh/2
<div id="container">
<div class="left">
<div class="content">
left
</div>
</div>
<div class="right">
<div class="content">
right
<textarea>Check me out!</textarea>
</div>
</div>
</div>
На в <div с классом=на"содержание" и>
есть, так что вы можете использовать padding и margin не испортив при этом плавает.
это самая важная часть в CSS:
textarea {
display: block;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
HTML-код:
<div id="left"></div>
<div id="content">
<textarea cols="2" rows="10" id="rules"></textarea>
</div>
Усс:
body{
width:100%;
border:1px solid black;
border-radius:5px;
}
#left{
width:20%;
height:400px;
float:left;
border: 1px solid black;
display:block;
}
#content{
width:78%;
height:400px;
float:left;
border:1px solid black;
text-align:center;
}
textarea
{
margin-top:100px;
width:98%;
}
Демо: [Здесь][1]
Я хотел сделать что-то вроде этого:
HTML-код:
<div class="wrapper">
<div class="side">sidebar here</div>
<div class="main">
<textarea class="taclass"></textarea>
</div>
</div><!--/ wrapper -->
Усс:
.wrapper{
display: block;
width: 100%;
overflow: hidden;
}
.side{
float:left;
width:20%;
}
.main{
float:right;
width:80%;
}
.taclass{
display:block;
width:100%;
padding:2%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Попробуйте это..добавить это в вашу страницу
<style>
textarea
{
width:100%;
}
</style>