Question

我想做什么？

我为textarea创建了一个自定义页脚。并希望改变我的textarea的内容溢出。因此，文本永远不会超出我的文本区域的页脚。

正如您在图片中看到的那样，文本超出了我的文本区域的页脚（水平线是页脚开始的位置）。我该如何预防呢？这样文本在到达页脚之前就会开始溢出。

我的代码：

#message textarea {
  resize: none;
  min-height: 250px;
  padding-bottom: 45px;
  overflow: hidden;
}

#sendMsg #separator hr {
  margin-top: -35px;
}

#sendMsg #contactFormBtn,
#showContactErrMsg {
  position: absolute;
  margin-top: -30px;
}

#sendMsg #showContactErrMsg {
  padding-left: 40px;
  font-size: 12px;
}

#showContactErrMsg {
  font-size: 14px;
  color: maroon;
  font-family: "Century Gothic";
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="row" id="message">
  <div class="col-xs-offset-1 col-xs-10">
    <div class="form-group">
      <label class="formLabel"><i class="fa fa-sticky-note-o"></i> Message </label>
      <textarea class="form-control" class="formInput" id='inputContactMsg'></textarea>
      <div class="row" id='sendMsg'>
        <div class="row" id='separator'>
          <div class="col-xs-offset-2 col-xs-8">
            <hr style="height: 0.5px; background-color: silver;">
          </div>
        </div>
        <div class="col-xs-8">
          <strong id='showContactErrMsg'></strong>
        </div>
        <div class="col-xs-4">
          <button type="submit" id='contactFormBtn'>Send</button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

更改#message textarea

中的以下代码

max-height: 250px; /*max instead of min*/
overflow: auto;/*scroll or auto instead of hidden*/

一旦高度达到设定值，这将强制你的textarea进行滚动。

希望这会有所帮助：）

＆＃13;

#message textarea { 
		resize: none; 
		max-height: 250px; /*change this to max*/
		padding-bottom: 45px; 
		overflow: auto;/*change this to scroll*/
    height: 90px;
    width: 100%;
    border: none;
}
 
#message textarea:focus{
  border: none;
  outline: none;
}

#sendMsg #separator hr { 
  margin-top: -35px; 
}

#sendMsg #contactFormBtn, #showContactErrMsg { 
  position: absolute; 
  margin-top: -30px; 
}

#sendMsg #showContactErrMsg { 
  padding-left: 40px; 
  font-size: 12px;
}

#showContactErrMsg { 
  font-size: 14px; 
  color: maroon; 
  font-family: "Century Gothic"; 
}
  
div .extra {
  height: 130px;
  display: block;
  overflow: auto;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row" id="message">
  <div class="col-xs-offset-1 col-xs-10">
    <div class="form-group">
      <label class="formLabel"><i class="fa fa-sticky-note-o"></i> Message         </label>
      <div class="extra form-control">
        <textarea class="" class="formInput" id='inputContactMsg'></textarea>
      </div>
      <div class="row" id='sendMsg'>
      <div class="row" id='separator'>
      <div class="col-xs-offset-2 col-xs-8">
        <hr style="height: 0.5px; background-color: silver;">
      </div>
    </div>
    <div class="col-xs-8">
      <strong id='showContactErrMsg'></strong>
    </div>
    <div class="col-xs-4">
      <button type="submit" id='contactFormBtn'>Send</button>
    </div>
    </div>
    </div>
  </div>
</div>

＆＃13;

编辑：将textarea添加到一个div中并给出了class =＆＃34; extra＆＃34;它。

如何更改元素

1 个答案: