php - textarea 穿过 div 部分

Question

我怎样才能阻止这种情况发生？

这是我联系我们表单的代码。我正在使用 Bootstrap 。当我展开文本区域时，它会穿过分区。我可以通过添加内联 CSS 在文本区域内尝试任何替代方法吗？

<div id="content">
  <div class="container">
    <div class="col-md-12">
      <ul class="breadcrumb">
        <li><a href="index.php">Home</a></li>
        <li><a href="index.php">Contact Us</a></li>

      </ul>
      <!--breadcrumb ends--->
    </div>
    <!---col-md-12 ends-->
    <div class="col-md-3">
      <?php include("sidebar.php"); ?>
    </div>
    <!--col-md-3 ends--->


    <div class="col-md-9">
      <div class="box">
        <div class="box-header">
          <center>
            <h2>Contact Us</h2>
            <p class="text-muted">
              Getting you the products and solutions you need to get the job done is ours rep’s first priority. Whether you have specific product questions or need more information on volume pricing, our rep has everything you need to keep your job running on time,
              on budget and on target. <br> If you have any questions,please feel free to contact us,our customer service center is working for you 24/7.
            </p>
          </center>
        </div>
        <!--box-header ends-->
        <form action="contact.php" method="post">
          <div class="form-group">
            <label>Name</label>
            <input type="text" class="form-control" name="name" required>
          </div>
          <!--form group--->

          <div class="form-group">
            <label>Email</label>
            <input type="text" class="form-control" name="email" required>
          </div>
          <!--form group--->


          <div class="form-group">
            <label>Subject</label>
            <input type="text" class="form-control" name="subject" required>
          </div>
          <!--form group--->


          <div class="form-group">
            <label>Message</label>
            <textarea class="form-control" name="message"></textarea>
          </div>
          <!--form group--->

          <div class="text-center">
            <button type="submit" class="btn btn-primary" name="submit">
    <i class="fa fa-user-md"></i>Send Message</button>
          </div>
          <!--text-center-->

        </form>
        <!--form ends-->
      </div>
      <!--box ends-->
    </div>
    <!--col-m-9 ends-->

Answer 1

点击此链接“试试这个会有帮助 How can I prevent the textarea from stretching beyond his parent DIV element? (google-chrome issue only)”或尝试下面的代码

你可以限制大小:

textarea {
    max-width: 100px; 
    max-height: 100px;
}

将尺寸限制为 parent 的宽度和/或高度:

textarea {
    max-width: 100%; 
    max-height: 100%;
}