CSS使内部div匹配外部div高度 [英] CSS making inner div match outer div height

问题描述

我基本上是制作表单（萤幕撷取画面： http://mason.gmu.edu /~vnguyenl/form.jpg ）其中有2列。标签列和输入列。标签面是一个div，它有自己的bg颜色，和输入字段一样。我试图使它，如果一侧有很多文本，比其他列将匹配它的高度。现在，如果一边大于另一边，就会有间隙。将欣赏任何帮助！非常感谢。

表单的html如下：

 < div class =formRow> 
< div class =labelColumn>姓氏：姓氏：姓氏：姓氏：姓氏：姓氏：姓：姓：姓：姓：姓：姓： < span class =required> *< / span>< / div> 
< div class =contentcolumn> 
< input class =textBox300type =textid =last_nametabindex =1/> 
< / div> 
< / div> 
  

css如下：

 ＃pt-profile-form .labelColumn ,.labelColumn2 {
 font-weight：bold; 
 float：left; 
 width：300px; / *左列宽度* / 
 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;高度：100％; } 
 
＃pt-profile-form .contentcolumn，.contentcolumn2 {
 margin-left：320px; / *将左边距设置为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 {/ *< textarea> * / 
 / * height：100px; * / 
 height：100％; 
} 
  

解决方案

/ strong>

就我所见，实现这一点的唯一方法是将背景颜色放在包装元素上（在你的情况下 < div class =formRow> ），然后确保使用清除将包装元素推送到完整高度，如@MarcB在他的注释中提到的（ http://quirksmode.org/css/clearing.html ）。

所以下面的CSS应该修复它：

  .formRow {
 overflow：auto; 
 background-color：＃EAE9D7; 
} 
  

演示：

http://jsfiddle.net/nottrobin/qnRgL/

注意这个解决方案是它会隐藏溢出的内容。

如果更改溢出属性由于任何原因导致问题，另一个解决方案是使用：after 伪元素。例如：

  .formRow：after {
 content：。 
 display：block; 
 height：0; 
 clear：both; 
 visibility：hidden; 
 background-color：＃EAE9D7; 
} 
  

请参阅通过CSS生成内容：

http://robertnyman.com/2007/04/12/how-to-clear-css-floats-without-extra-markup-different-techniques-explained/

请注意，此解决方案在IE 6和7中不起作用。

I'm basically making a form (screenshot: http://mason.gmu.edu/~vnguyenl/form.jpg) where there are 2 columns. The label column and the input column. The label side is in a div that has its own bg color, and same with the input field side. I'm trying to make it so that if there's to much text on one side than the other column will match it's height. Right now, if one side is larger than the other, there are gaps. Would appreciate any help! Thanks.

The html for the form looks like the following:

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

The css is the following:

#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%;
}

解决方案

Simple solution

As far as I can see the only way to achieve this is to put the background color on the wrapping element (in your case <div class="formRow">) and then ensure that wrapping element is pushed to the full height by use of clearing, as @MarcB mentioned in his comment ( http://quirksmode.org/css/clearing.html ).

So the following CSS should fix it:

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

Demo:
http://jsfiddle.net/nottrobin/qnRgL/

The one caveat with this solution is that it will hide overflowing content. If you need overflowing content to be displayed try the alternate solution instead.

---

Alternate clearing solution

If changing the overflow property causes problems for any reason, another solution is to add generated content using the :after pseudo-element. E.g.:

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

See under Generating Content Through CSS:
http://robertnyman.com/2007/04/12/how-to-clear-css-floats-without-extra-markup-different-techniques-explained/

Note however that this solution will not work in IEs 6 and 7.

这篇关于CSS使内部div匹配外部div高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！