textarea 跨过 div 部分

Posted 2023-05-07

【中文标题】textarea 跨过 div 部分

【英文标题】：textarea crosses the div section

【发布时间】：2018-10-09 21:36:20

【问题描述】：

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

这是我的联系我们表单的代码。我正在使用引导程序。当我扩展文本区域时，它会跨越分区。我可以通过添加内联 CSS 在 textarea 中尝试任何替代方法吗？

<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-->

【问题讨论】：

默认情况下它不会超过你输入的col-md-9。是你的CSS让它看起来像这样。

我该如何解决？当我手动拉它时它超过了我的，但默认情况下它很好

***.com/questions/3899463/… 的可能重复项？

This 可能会有所帮助

@hanumanhanu 添加了评论作为答案。请接受并投票，这样可以帮助其他人。

【参考方案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;

将尺寸限制为父母的宽度和/或高度：

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