Question

我有这个页面：http://www.nyccriminallawyer.com/felonymisdemeanor/ 我想要做的是让左内盒（白色的那个与Felony / Misdemeanor作为名为.in_left的标题）为其父母的100％高度（称为.inner）

代码在这里：

.in_left {
float: left;
width: 721px;
margin-top: 10px;
font-family: 'Open Sans', sans-serif;
line-height: 24px;
background-color: white;
border-radius: 4px 4px 4px 4px;
box-shadow: 0px 0px 11px -4px #000;
}

.inner {
background: #CCD7CC;
margin-top: 1px;
color: #5A5A5A;
padding: 10px;
clear: both;
overflow: hidden;
}

我已经尝试过高度：100％和最小高度，但它不起作用。

Answer 1

不要在.in_left和.in_right上使用浮点数，对这些使用display:table-cell;，最重要的是，在其容器上使用display:table;：

.inner {  
    display: table;  
}  
.in_left {
    width: 229px;
    /* other style */
    display: table-cell;  
}  
.in_left {
    width: 721px;
    /* other style */
    display: table-cell;  
}

Answer 2

您无法将子项扩展为其父项的高度的100％，但您可以使其使用Faux Columns技术进行扩展。

Answer 3

仅当父元素高度以某种方式固定（如高度：300px）时，才能将元素的高度设置为100％。但是你可以将子元素设置为绝对定位（对于它的直接父元素）并在四个方向上设置它的位置：

.in_left {
  ...
  position: relative;
}

.inner {
  ...
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

在这里演示：http://jsbin.com/OkIQUCi/1/

CSS高度为其父级的100％

3 个答案: