我有textarea max-width的问题,我需要它不超过.table-cell.two宽度调整大小,在这个例子:
HTML:
- <div class="wrapper">
- <div class="table">
- <div class="table-cell one">
- <p>small cell</p>
- </div>
- <div class="table-cell two">
- <p>textarea cell</p>
- <textarea></textarea>
- </div>
- </div>
CSS:
- textarea {
- max-width: 100%;
- }
- .wrapper {
- width: 500px;
- }
- .table {
- display: block;
- width: 100%;
- }
- .table-cell {
- display: table-cell;
- background: #E2D8C1;
- vertical-align: top;
- padding: 10px;
- }
- .table-cell.two {
- width: 100%;
- background: #DAC082;
- }
- .table textarea {
- max-width: 100%;
- width: 100%;
- height: 100px
- }
请不要建议使用javascript,需要一个纯粹的CSS解决方案.
解决方法
使用:
- textarea {
- /* will prevent resizing horizontally */
- resize:vertical;
- }