集装箱外的文字区

Textarea gettong outside the container

本文关键字：文字区 集装箱      更新时间：2023-09-26

请检查下面的小提琴：

https://jsfiddle.net/a13nd32u/3/

 <textarea rows="5" cols="50" style="width:95%;height:90%;overflow:hidden">
 What's on your mind?
 </textarea>

在这里，当我尝试垂直扩展文本区域时，它的框正在框外。我想实现它，以便每当用户垂直扩展文本区域时，div 背景也应该随之扩展。任何人都可以提供解决方案

HTML 

 <div class="divv">
        <textarea rows="4" cols="65"></textarea>
      <h4>
        space
      </h4>
</div>

.CSS

.divv{
    background-color:green;
 }
textarea {
    resize: vertical;
    overflow: auto;
}

JSFIddle看看是否有帮助

谢谢

使用这个 

#container {
background-color: #e6e6e6;
border-style: double;
float: left;
height: auto;
min-height: 160px;
padding-top: 5px;
width: 470px;
}

也许是这样的东西？ https://jsfiddle.net/aa0mkvfz/：

#container {
    border-style: double;
    width: 470px;
    height: 160px;
    background-color: #E6E6E6;
    padding-top: 5px;
    overflow: auto;
}
hr {
    border-color: #FAFAFA;
    padding: 0;
    margin: 0
}
#upper_space {
    color: #3b5998;
    margin: 0;
    padding-top: 6px;
    padding-bottom: 5px;
    padding-left: 10px;
}
#textbox {
    background-color: white;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    overflow: auto;
}
#post_part {
    display: inline;
    padding: 6px 9px;
    float: right;
    font-size: 15px
}
select {
    width: 80px;
    height: 21px;
    padding-right: 10px;
    display: inline
}
#button1 {
    display: inline;
    padding-left: 10px
}
#post_button {
    height: 24px;
    width: 70px;
    font-size: 14px;
    -webkit-appearance: none;
}

我所做的只是在所需的div上添加一个overflow:auto;，这将创建一个新的块格式上下文，请查看此文档以了解更多信息：http://www.sitepoint.com/understanding-block-formatting-contexts-in-css/

相关文章：