如何删除textarea和父div之间的空间

Question

我有以下表格，其中包含一个文本区域，如图所示：

如您所见，蓝色阴影区域和父 div 的底部之间有一个空间。

我怎样才能删除这个空间？

html:

    <div class="bottomBox">
        <h3>Free Quote Form</h3>
        <form class="freeQuoteForm" autocomplete="off">
            <div class="formFields">
                <input type="text" id="firstName" class="input" required><label class="formLabel" for="firstName">First Name</label><input type="text" id="lastName" class="input" required><label class="formLabel" for="LastName">Last Name</label>

            </div>
            <div class="formFields">
                <input type="email" id="email" class="input" required><label class="formLabel" for="email">Email Address</label>
            </div>
            <div class="formFields">
                <textarea rows="12" cols="50" id="sampleText" wrap="hard" class="input" required></textarea><label class="formLabel" for="sampleText">Please include a 1000 word sample from your document.</label>
        </form>
    </div>

CSS：

.bottomBox {
    background: white;
    margin: 30px auto;
    width: 640px;
    height: 700px;
    border: 1px solid #9c9c9c;
    animation: fadeIn 1.5s forwards, slideUpBottom 0.75s forwards;
}

.bottomBox h3 {
    text-align: center;
    padding: 20px 0;
}

.freeQuoteForm {
    margin: 0 auto;
    width: 530px;
    height: 550px;
    border: 1px solid #9c9c9c;
    text-align: left;
}

.formFields {
    border-bottom: 1px solid #9c9c9c;
    position: relative;
}

.input {
    font-family: "Sinkin Sans", Verdana, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 200;
    border: none;
    display: inline-block;
    height: 60px;
    padding: 0px;
    background: transparent;
    padding-left: 12px;
    width: 50%;
    box-sizing: border-box;
    transition: background-color 0.5s ease-in-out;
}

.input:hover {
    background-color: #f9f9f9;
}


.formLabel {
    position: absolute;
    left: 10px;
    -webkit-user-select: none;
    cursor: pointer;
    color: #bfbfbf;
    font-size: 70%;
    line-height: 8em;
    padding-left: 5px; 
    height: 3px;
    -webkit-transform-origin: center left; 
    -webkit-animation: fadeIn 2s ease forwards;
}

#lastName { border-left: 1px solid #9c9c9c; }

#lastName + .formLabel { left: 52%; }

#email, #sampleText { width: 100%; }

#sampleText {
    height: 350px;
    padding-top: 20px;
    overflow: scroll;
    resize: none;
}

#sampleText + .formLabel {
    top: -6px;
}

.input:focus {
    outline:none;
    background-color: #e6f9ff;
}

.input:focus + .formLabel {
    -webkit-animation: colorScaleMove 0.75s ease-in-out forwards;
}


.input:valid + .formLabel { 
    -webkit-animation: colorScaleMoveGrey 0s ease forwards;  
}

#sampleText:valid + .formLabel {
    animation: fadeOut 0s ease forwards;
}

Answer 1

发生此问题是因为块级元素默认按基线（如文本）对齐。 要修复它，只需设置 #sampleText vertical-align: top; 或vertical-align: bottom; . 我还建议你让它overflow: auto;

演示： codepen

Answer 2

您必须从.freeQuoteForm中删除高度。 导致其将父 div 高度固定到固定部分。 所以释放高度，它将根据孩子的需要自动获取高度。

小提琴链接

更新的 CSS 块：

.freeQuoteForm {
    margin: 0 auto;
    width: 530px;
    border: 1px solid #9c9c9c;
    text-align: left;
}

输出：

更新的 HTML：

<div class="bottomBox">
  <h3>Free Quote Form</h3>
  <form class="freeQuoteForm" autocomplete="off">
    <div class="formFields">
      <input type="text" id="firstName" class="input" required><label class="formLabel" for="firstName">First Name</label><input type="text" id="lastName" class="input" required><label class="formLabel" for="LastName">Last Name</label>

    </div>
    <div class="formFields">
      <input type="email" id="email" class="input" required><label class="formLabel" for="email">Email Address</label>
    </div>
    <div class="formFields">
      <textarea rows="12" cols="50" id="sampleText" wrap="hard" class="input" required></textarea>
      <label class="formLabel" for="sampleText">Please include a 1000 word sample from your document.</label>
     </div>
  </form>
</div>

您错过了将 div 放在 div 的最后一个子项中，即textarea的父项。