Question

请检查以下小提琴：

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

这时当我试图垂直扩展textarea时，它的盒子就在盒子外面了。我想实现它，这样每当用户垂直展开textarea时，div背景也应该随之展开。任何人都可以提供解决方案

Answer 1

<强> 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 看看是否有帮助

谢谢

Answer 2

使用此

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

Answer 3

也许是这样的？ 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/

Textarea在集装箱外面

3 个答案: