如何使用CSSGrid拉伸專案以填充容器？-有解無憂

我正在嘗試制作聯系表格。我希望<button>在表單的左下角。我希望<textarea>高度伸展以填充其<label>上方和<button>下方之間的剩余高度。我想我可以使用 CSS Grid 來正確對齊所有內容，但我不確定使表單具有回應性的最佳方法是什么。

我的代碼：

.contact-section-container {
    background: #2A6CCF;
    border-radius: 20px;
    font-family: sans-serif;
    font-size: clamp(1rem, 1.042vw, 1.25rem);
    color: white;
    width: clamp(30rem, 41.98vw, 50.375rem);
    height: clamp(30rem, 38.28125vw, 45.9375rem);
    padding: 1.5625rem 3.125rem 1.5625rem 3.125rem;
}

.contact-section-container h2 {
    font-size: 1.875rem;
    color: white;
    display:flex;
    justify-content:center;
    margin-bottom: .833em;
}

.contact-section-container div label {
    display: block;
    margin-bottom: .5em;
}

.contact-section-container div:nth-of-type(n 2) label{
    margin-top: .75em;
}

.contact-section-container div input, textarea {
    background: #F2F2F2;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    height: 2rem;
    width: 100%;
}

.contact-section-container button {
    background: #DFE16C;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    color: black;
    font-size: 1.25rem;
    font-weight: 600;
    width: 10em;
    height: 2.5em;
}

textarea {
    resize:none;
}

<form class="contact-section-container">
        <h2>Contact Form</h2>
        <div class="contact-form-input-container">
            <div>
                <label for="contact-page-name-input">Name*</label>
                <input id="contact-page-name-input" type="text"/>
            </div>
            <div>
                <label for="contact-page-email-input">Email*</label>
                <input id="contact-page-email-input" type="email"/>
            </div>
            <div>
                <label for="contact-page-message-input">Message*</label>
                <textarea id="contact-page-message-input"></textarea>
            </div>
            <button type="submit">Submit</button>
        </div>
    </form>

uj5u.com熱心網友回復：

從我從您的問題中得到的結果來看，這就是您要尋找的結果。您可以設定樣式ID #contact-page-message-input并給它一個height來調整該文本框。然后我繼續使用柔性顯示幕將您的按鈕居中。

我還調整了您的.contact-section-container寬度30rem to 32rem以支持這些更改。clamp如果您正在尋找完全回應式布局，我建議不要在您的高度上使用 a 。

.contact-section-container {
    background: #2A6CCF;
    border-radius: 20px;
    font-family: sans-serif;
    font-size: clamp(1rem, 1.042vw, 1.25rem);
    color: white;
    width: clamp(30rem, 41.98vw, 50.375rem);
    height: clamp(32rem, 38.28125vw, 34.9375rem);
    padding: 1.5625rem 3.125rem 1.5625rem 3.125rem;
}

.contact-section-container h2 {
    font-size: 1.875rem;
    color: white;
    display:flex;
    justify-content:center;
    margin-bottom: .833em;
}

.contact-section-container div label {
    display: block;
    margin-bottom: .5em;
}

.contact-section-container div:nth-of-type(n 2) label{
    margin-top: .75em;
}

.contact-section-container div input {
    background: #F2F2F2;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    height: 2rem;
    width: 100%;
}

.contact-section-container button {
    background: #DFE16C;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    color: black;
    font-size: 1.25rem;
    font-weight: 600;
    width: 10em;
    height: 2.5em;
}

/* additions */
#contact-page-message-input {
  height: 200px;
}

@media only screen and (max-width: 600px) {
  .contact-section-container {
    width: auto;
  }
}

textarea {
  height: auto;
  width: 100%; /* 100% of container */
}

<form class="contact-section-container">
   <h2>Contact Form</h2>
   <div class="contact-form-input-container">
      <div>
         <label for="contact-page-name-input">Name*</label>
         <input id="contact-page-name-input" type="text"/>
      </div>
      <div>
         <label for="contact-page-email-input">Email*</label>
         <input id="contact-page-email-input" type="email"/>
      </div>
      <div>
         <label for="contact-page-message-input">Message*</label>
         <textarea row="15" id="contact-page-message-input"></textarea>
      </div>
      <button type="submit" class="btn">Submit</button>
   </div>
</form>

uj5u.com熱心網友回復：

我想我終于以一種回應式的方式解決了我的問題，感謝所有回答我問題的人。如果有人對我的回答有任何問題或建議，請發表評論。

.contact-section-container {
    background: #2A6CCF;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
    border-radius: 20px;
    font-size: clamp(1rem, 1.042vw, 1.25rem);
    font-family: sans-serif;
    width: clamp(30rem, 41.98vw, 50.375rem);
    height: clamp(30rem, 38.28125vw, 45.9375rem);
    padding: 1.5625rem 3.125rem 1.5625rem 3.125rem;
    color: white;
    display: flex;
    flex-direction: column;
}

h2 {
    font-size: 1.875rem;
    display:flex;
    justify-content:center;
    margin-bottom: .833em;
}

.text-input-container label {
    display: inline-block;
    margin-bottom: .5em;
}

.contact-section-container div:nth-of-type(n 2) label{
    margin-top: .75em;
}

.textarea-input-container label {
    margin-bottom: .5em;
}

.text-input-container input {
    background: #F2F2F2;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    height: 2.875rem;
    width: 100%;
}


.textarea-input-container button {
    background: #DFE16C;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    color: black;
    font-size: 1.25rem;
    font-weight: 600;
    width: 10em;
    height: 2.5em;
    margin-top: .75em;
}

.contact-section-container img {
    margin-right: .75em;
}

textarea {
    flex-grow: 1;
    resize: none;
    background: #F2F2F2;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    width: 100%;
}

.textarea-input-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

<form class="contact-section-container">
        <h2>Contact Form</h2>
        <div class="text-input-container">
            <label for="contact-page-name-input">Name* </label>
            <input id="contact-page-name-input" type="text" name="name"/>
        </div>
        <div class="text-input-container">
            <label for="contact-page-email-input">Email*</label>
            <input id="contact-page-email-input" type="email" name="email"/>
        </div>
        <div class="textarea-input-container">
            <label for="contact-page-message-input">Message*</label>
            <textarea id="contact-page-message-input" name="message"></textarea>
            <button type="submit">Submit</button>
        </div> 
</form>

uj5u.com熱心網友回復：

對于 message ，您應該使用 textarea 而不是 input 。

對于布局，現在網格布局確實是一個功能強大且易于使用的東西。fr 單元確實是一種為行或列分配區域的便捷方式。

可能的例子：

.contact-section-container {
  background: #2A6CCF;
  border-radius: 20px;
  font-family: sans-serif;
  font-size: clamp(1rem, 1.042vw, 1.25rem);
  color: white;
  width: clamp(30rem, 41.98vw, 50.375rem);
  height: clamp(30rem, 38.28125vw, 45.9375rem);
  padding: 1.5625rem 3.125rem 1.5625rem 3.125rem;
  display:grid;
  grid-template-rows: auto 1fr auto;
}
.contact-form-input-container {
display:grid;
grid-template-rows: auto auto 1fr 
}
.contact-form-input-container div:last-of-type {
display:grid;
grid-template-rows:auto 1fr;
}
.contact-section-container h2 {
  font-size: 1.875rem;
  color: white;
  display: flex;
  justify-content: center;
  margin-bottom: .833em;
}

.contact-section-container div label {
  display: block;
  margin-bottom: .5em;
}

.contact-section-container div:nth-of-type(n 2) label {
  margin-top: .75em;
}

.contact-section-container div input,
.contact-section-container div textarea {
  background: #F2F2F2;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  height: 2rem;
  width: 100%;
}

.contact-section-container div textarea {
  height: auto;
  resize:none; /* because your layout does not allow it */
}

.contact-section-container button {
  background: #DFE16C;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  color: black;
  font-size: 1.25rem;
  font-weight: 600;
  width: 10em;
  height: 2.5em;
  margin:1rem auto 0;
}

<form class="contact-section-container">
  <h2>Contact Form</h2>
  <div class="contact-form-input-container">
    <div>
      <label for="contact-page-name-input">Name*</label>
      <input id="contact-page-name-input" type="text" />
    </div>
    <div>
      <label for="contact-page-email-input">Email*</label>
      <input id="contact-page-email-input" type="email" />
    </div>
    <div>
      <label for="contact-page-message-input">Message*</label>
      <textarea  id="contact-page-message-input"></textarea>
    </div>
    <button type="submit">Submit</button>
  </div>
</form>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/360410.html

標籤：html css 形式弹性盒 css网格

上一篇：將Row中的專案垂直居中

下一篇：html/PHP-表單POST為空