0

我有这个页面：http : //www.nyccriminallawyer.com/felonymisdemeanor/ 我想要做的是让左内箱（白色的重罪/轻罪为标题，称为.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;
}

我也尝试过 height: 100% 和 min-height ，但它不起作用。

4

3 回答 3

2

不要在.in_leftand上使用 float ，在那些上.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;  
}
于 2013-11-10T21:16:06.317 回答
1

仅当父元素的高度以某种方式固定（如高度：300px）时，将元素的高度设置为 100% 才有效。但是您可以将子元素设置为绝对定位（与其直接父元素）并将其位置设置为四个方向：

.in_left {
  ...
  position: relative;
}

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

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

于 2013-11-10T21:16:59.443 回答
1

您不能将子级扩展到其父级的 100% 高度，但您可以使用Faux Columns技术使其看起来像扩展。

于 2013-11-10T21:11:00.137 回答