CSS使内分区与外分区高度匹配

我基本上是在做一个表单（截图：），其中有两列。标签列和输入列。标签端位于具有自己的bg颜色的div中，与输入字段端相同。我试图使它，如果有太多的文字在一边比其他列将匹配它的高度。现在，如果一边比另一边大，就会有缺口。非常感谢您的帮助！谢谢

表单的html如下所示：

<div class="formRow">
<div class="labelColumn">Last Name: Last Name: Last Name: Last Name: Last Name: Last Name: Last Name: Last Name: Last Name: Last Name: Last Name: Last Name: <span class="required">*</span></div>
<div class="contentcolumn">
    <input class="textBox300" type="text" id="last_name"  tabindex="1"  />
</div>
</div>

#pt-profile-form .labelColumn, .labelColumn2 {
font-weight:bold;
float:left;
width:300px; /* Width of left column */
margin-left:0px;
background:#f0f4f7;
text-align:left;
padding:5px;
padding-left:14px;
display:block;
white-space:normal;
position:relative;
clear:both;
}

#pt-profile-form .formRow { clear:both; height:100%;  }

#pt-profile-form .contentcolumn, .contentcolumn2 {
margin-left:320px; /* Set left margin to LeftColumnWidth */
background-color:#eae9d7;
padding:5px;
text-align:left;
vertical-align:middle;
position:relative;
}

#pt-profile-form .labelColumn, .contentcolumn {
/*height:30px;*/
min-height:30px;
height:100%;
}

#pt-profile-form .labelColumn2, .contentcolumn2 { /* column properties for <textarea>     */
/*height:100px;*/
height:100%;
}

姓：姓：姓：姓：姓：姓：姓：姓：姓：姓：姓：姓：姓：姓：姓：姓：姓：姓：*

css如下所示：

<div class="formRow">
<div class="labelColumn">Last Name: Last Name: Last Name: Last Name: Last Name: Last Name: Last Name: Last Name: Last Name: Last Name: Last Name: Last Name: <span class="required">*</span></div>
<div class="contentcolumn">
    <input class="textBox300" type="text" id="last_name"  tabindex="1"  />
</div>
</div>

#pt-profile-form .labelColumn, .labelColumn2 {
font-weight:bold;
float:left;
width:300px; /* Width of left column */
margin-left:0px;
background:#f0f4f7;
text-align:left;
padding:5px;
padding-left:14px;
display:block;
white-space:normal;
position:relative;
clear:both;
}

#pt-profile-form .formRow { clear:both; height:100%;  }

#pt-profile-form .contentcolumn, .contentcolumn2 {
margin-left:320px; /* Set left margin to LeftColumnWidth */
background-color:#eae9d7;
padding:5px;
text-align:left;
vertical-align:middle;
position:relative;
}

#pt-profile-form .labelColumn, .contentcolumn {
/*height:30px;*/
min-height:30px;
height:100%;
}

#pt-profile-form .labelColumn2, .contentcolumn2 { /* column properties for <textarea>     */
/*height:100px;*/
height:100%;
}

#pt profile form.labelColumn.labelColumn2{
字体大小：粗体；
浮动：左；
宽度：300px；/*左栏宽度*/
左边距：0px；
背景#f0f4f7；
文本对齐：左对齐；
填充物：5px；
左侧填充：14px；
显示：块；
空白：正常；
位置：相对位置；
明确：两者皆有；
}
#pt profile form.formRow{clear:两者；高度：100%；}
#pt配置文件表单.contentcolumn、.contentcolumn2{
左边距：320px；/*将左边距设置为LeftColumnWidth*/
背景色：#eae9d7；
填充物：5px；
文本对齐：左对齐；
垂直对齐：中间对齐；
位置：相对位置；
}
#pt配置文件表单.labelColumn、.contentcolumn{
/*高度：30px*/
最小高度：30px；
身高：100%；
}
#pt profile form.labelColumn2.contentcolumn2的{/*列属性*/
/*高度：100px*/
身高：100%；
}

简单解决方案

据我所知，实现这一点的唯一方法是在包装元素上添加背景色（在您的案例中是

），然后确保包装元素通过使用清除按钮推到最大高度，如@MarcB在其评论（）中所述

因此，下面的CSS应该修复它：

.formRow {
    overflow: auto;
    background-color: #EAE9D7;
}

演示：

此解决方案的一个警告是，它将隐藏溢出的内容。如果需要显示溢出的内容，请尝试其他解决方案

---

替代清算解决方案

如果更改

overflow

属性因任何原因导致问题，另一种解决方案是使用

：after

伪元素添加生成的内容。例如：

.formRow:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    background-color: #EAE9D7;
}

请参见

通过CSS生成内容下的内容：


但是请注意，这个解决方案在IEs 6和IEs 7中不起作用。
请注意：这也是：作为CSS最佳实践的旁注：现在有些人（包括我自己）认为应该完全避免在CSS中使用ID，因为它们使级联规则复杂化，实际上不提供任何解决类问题的好处——如果可能的话，而且，应该始终使用最简单的CSS规则来实现效果——不要添加不必要的特殊性。来源：谢谢罗宾！我会好好玩玩的。我也很欣赏旁注。我6个月前才开始做前端，所以我很欣赏我应该遵循的小规则和习惯。我一直在努力寻找一篇关于当前通用标准的好文章，如果你知道的话。谢谢我在上面发布的链接--有一些很好的建议。除此之外，这里还有其他关于最佳实践的好文章：。正如我所说的，我认为您应该只在内容中使用ID作为锚（例如
index.html#introduction
），而不应该使用CSS。Internet Explorer替代样式的最佳解决方案是HTML5样板上使用的解决方案：。如果您认为我的解决方案解决了您的问题，您能将其设置为可接受的解决方案吗？助教。