调整文本区域大小时卡片中表单的响应高度

Question

我目前正在我的第一个网站上工作，我正在用卡片编写表单（我将展示卡片的 css）。我的问题是，当我尝试调整文本区域大小时，它超出了卡片的边界，并且还将“发送”按钮移出了卡片。最重要的是，该部分的高度没有调整大小，但右侧出现了一个滚动条。

这是 html :

<section class="form">
        <div class="container grid">
          <div class="show" data-aos="fade-right">
            <img src="images/polytech.jpg" alt="">
            <div class="card">
              <p>N'hésitez pas à nous contacter pour toute demande de devis.</p>
              <h1>Contactez nous</h1>
              <p>Email : contact@linkopg.onmicrosoft.com</p>
              <p>Téléphone : 06 79 24 06 79 </p>
              <a href="https://www.linkedin.com/company/linko-polytech-grenoble/"><i class="fab fa-linkedin fa-3x"></i></a>
              <a href="https://www.facebook.com/linko.polytech/"><i class="fab fa-facebook fa-3x"></i></a>
              <a href="https://www.instagram.com/linko_polytech_grenoble/"><i class="fab fa-instagram fa-3x"></i></a>
            </div>
          </div>
          <div class="showcase-form card" data-aos="zoom-in">
            <form action="">
              <div class="form-control container grid">
                <input type="text" name="name" placeholder="Nom" required />
                <input type="text" name="name" placeholder="Prénom" required />
              </div>
              <div class="form-control">
                <input
                  type="text"
                  name="company"
                  placeholder="Entreprise"
                  required
                />
              </div>
              <div class="form-control">
                <input type="email" name="email" placeholder="Votre Email" required />
              </div>
              <div class="form-control">
                <input type="text" name="phone" placeholder="Votre numéro de téléphone" required />
              </div>
              <div class="form-control" aria-invalid="false">
                <textarea type="text" name="message" placeholder="Votre message"></textarea>
              </div>
              <input type="submit" value="Envoyer" class="btn btn-secondary "/>
              <div id="status"></div>
            </form>
          </div>
        </div>
      </section>

CSS :

.container.grid {
    max-width: 1200px;
    margin: 0 auto;
    overflow: auto;
    padding: 0 40px;
}

.card {
    background-color: white;
    color: #333;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    padding: 20px;
    margin: 10px;  
}

.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0px;
    justify-content: center;
    align-items: center;
    height: 100%;

}
.form {
    width: 100%;
    background-color: var(--secondary-color);
    color: black;
    position: relative;
    display: flex;
    margin: 0 auto;
}


.form h1 {
    font-size: 40px;
    font-weight: bold;
}

.form p {
    line-height:1.1em;
    margin: 20px 0;
    font-size: 20px;

}

.showcase-form.card {
    height: 80%;
    width: 100%;
    padding: 20px;
    margin: 0 auto;
    position: inherit;
}

.form img {
    height: 100%;
    width: 100%;
    border-radius: 8px;
}
.form a {
    margin: 20px 0;
    padding: 2px;
}

.form i:hover {
    transition: transform 0.3s ease-in;
    transform: translateY(-10px);
}

.form .grid {
    overflow: visible;
    grid-template-columns: 40% 60%;
    gap:  20px;
    padding: auto;
    margin: 0 auto;
    justify-content: flex-end;
}

.form-control.grid {
    overflow: visible;
    grid-template-columns: 50% 50%;
    gap:  10px;
    justify-content: flex-end;
    position: relative;
}

.showcase {
    height: 400px;
    background-color: var(--primary-color);
    color: #fff;
    position: relative;
}

.showcase h1 {
    font-size: 80px;
    font-weight: bold;
}

.showcase p {
    line-height:1.1em;
    margin: 20px 0;
    font-size: 40px;

}

.showcase .grid {
    overflow: visible;
    grid-template-columns: 55% 45%;
    gap: 30 px;
}


.showcase-form .form-control {
    margin: 30px 0;
    height: 100%;
}

.showcase-form input {
    border: 0;
    border-bottom: 1px solid #b4becb;
    width: 100%;
    padding: 3px;
    font-size: 16px;
}


textarea{
    padding: 10px;
    resize: vertical;
    width: 100%;
    height: 250px;
    box-sizing: border-box;
}

.showcase-form input:focus {
    outline: none;
}

图片如下：

Form before resizing Form after resizing

form after resizing 2

Answer 1

尝试从 .showcase-form class -

中删除高度属性


.showcase-form.card {
  width: 100%;
  padding: 20px;
  margin: 0 auto;
  position: inherit;
}

或者设置高度属性为fit-content-


.showcase-form.card {
  height: fit-content;
  width: 100%;
  padding: 20px;
  margin: 0 auto;
  position: inherit;
}

调整文本区域大小时卡片中表单的响应高度

Responsive height for a form in a card when resizing a textarea

html

css

grid

responsive