通过设置儿童身高填充百分比

我有2栏。第一列较高。第二列有3个字段集。我想通过设置儿童身高百分比填写第二栏，但不起作用。第二列高度必须等于第一列高度。怎么做？通过设置儿童身高填充百分比

JSFiddle HERE

更新：

我试图设置家长高度，但第三个字段集走出了secondColumn的。

JSFiddle HERE

来源

2014-02-20 Emerald214

以百分比为单位的设置高度仅适用于有相对父级的情况。由于你父母的身高没有设置，所以没有任何反应。尝试设置一个高度来你的'容器'div？ –

您是否希望两列的高度足够大，以满足两者中较大者的内容或两列填充页面的整个高度？ http://jsfiddle.net/Q3D45/13/演示填充整个页面。 –

不完整的页面。他们应该填充容器。 secondColumn高度应该遵循firstColumn高度。 – Emerald214

下面是使用CSS表格单元格处理这个问题的一种方式。

对于你的HTML，在短期（最右）列中添加一个包装div：

<div id="container"> 
    <div id="firstColumn"> 
     CONTENT<br> 
     CONTENT<br> 
     CONTENT<br> 
     CONTENT<br> 
     ... 
     CONTENT<br> 
    </div> 
    <div id="secondColumn"> 
     <div class="wrapper"> 
     <fieldset id="first"> 
      <legend>TEST1</legend> 
      Content 
     </fieldset> 
     <fieldset id="second"> 
      <legend>TEST2</legend> 
      Content 
     </fieldset> 
     <fieldset id="third"> 
      <legend>TEST3</legend> 
      Content 
     </fieldset> 
     </div> 
    </div> 
</div>

对于CSS，请尝试以下操作：

#container { 
    display: table; 
    height: 100%; 
} 

#firstColumn { 
    display: table-cell; 
    height: 100%; 
    background-color: yellow; 
} 

#secondColumn { 
    display: table-cell; 
    height: 100%; 
    background-color: gray; 
} 
.wrapper { 
    height: 100%; 
    outline: 2px dotted blue; 
} 
legend { 
    border: 1px dashed blue; 
} 
#first { 
    height: 15%; 
} 

#second { 
    height: 25%; 
} 

#third { 
    height: 45%; 
}

应用display: table父#container，和display: table-cell到子元素#firstColumn和#secondColumn。将表格和表格元素的高度设置为100％。

对于.wrapper，请将高度设置为100％，以便填充列的高度，然后调整字段集元素的高度。

请注意，您需要为图例允许一些垂直空间（我假设为5％），因此 15％+ 25％+ 45％+ 3x5％= 100％，这应该接近您的需要。

见演示在：http://jsfiddle.net/audetwebdesign/qs25d/

注意：您可能希望在最小高度设置为父（表）的容器，以确保这三个字段集有足够的空间，否则，你可能无法获得垂直高度比例与字段集的预期相同。

来源

2014-02-20 03:02:00

通过设置儿童身高填充百分比

回答

相关问题