Как расширить ширину textarea до 100% родительского?
Я пробую ширину 100%, но он не работает, он расширяет до 100% страницы, что краш-макет.
Здесь вопрос визуально.
Просьба дать несколько советов.
Как расширить ширину textarea до 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>
Вам нужно определить width
div, содержащего textarea
, и когда вы объявите textarea
, вы можете установить .main > textarea
на width: inherit
.
Примечание: .main > textarea
означает a <textarea>
внутри элемента с class="main"
.
Вот рабочее решение
HTML:
<div class="wrapper">
<div class="left">left</div>
<div class="main">
<textarea name="" cols="" rows=""></textarea>
</div>
</div>
CSS:
.wrapper {
display: table;
width: 100%;
}
.left {
width: 20%;
background: #cccccc;
display: table-cell;
}
.main {
width: 80%;
background: gray;
display: inline;
}
.main > textarea {
width: inherit;
}
box model - это то, о чем должен знать каждый веб-разработчик. работа с процентами для размеров и пикселей для заполнения/поля просто не работает. Всегда есть разрешение, при котором оно выглядит не очень хорошо (например, задавая ширину 90% и заполнение/край 10px в div с шириной менее 100 пикселей).
Проверьте это (используя код micro.pravi): 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 class="content">
, поэтому вы можете использовать отступы и поля, не закручивая поплавки.
это самая важная часть CSS:
textarea {
display: block;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Я бы сделал что-то вроде этого:
HTML:
<div class="wrapper">
<div class="side">sidebar here</div>
<div class="main">
<textarea class="taclass"></textarea>
</div>
</div><!--/ wrapper -->
CSS
.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;
}
HTML:
<div id="left"></div>
<div id="content">
<textarea cols="2" rows="10" id="rules"></textarea>
</div>
CSS
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%;
}
DEMO: ЗДЕСЬ
Попробуйте это.. Добавьте это на свою страницу
<style>
textarea
{
width:100%;
}
</style>
Добавьте css
<style type="text/css">
textarea
{
border:1px solid #999999
width:99%;
margin:5px 0;
padding:1%;
}
</style>