Question

所以我正在开发一个小论坛，我遇到了一个小设计问题。每个帖子中的侧边栏应该与内容的高度（写入的文本）相匹配，但侧边栏只会达到显示所有内容所需的高度，然后停止。

CSS：

.forumContent {
list-style-type: none;
background: #34495e;
letter-spacing: 1px;
width: 1170px;
margin: 0;
color: white;
}

.forumContent li {
padding: 0 0 0 10px; /* 5px 0 5px 10px */
margin-left: -40px;
min-height: 41px;
overflow: auto;
border-bottom: 1px solid #000;
}

.forumContent li:last-child {
border-bottom: none;
}

.forumContent li h3 {
margin: 0;
padding: 0;
font-size: 14px;
}

.forumContent li small {
font-size: 9px;
}

.forumContent a {
color: white;
text-decoration: none;
width: 100%;
height: 100%;
}

.forumContent li:hover {
background: #3E5368;
}

.forumContent a li {
float: left;
width: 366px;
}

.forumContent a li:first-child {
width: 100px;
}

.forumContent li     .new b {
font-size: 12px;
}

.forumContent li     .new {
float: right;
margin-right: 8px;
margin-top: -2px;
font-size: 9px;
background: #2c3e50;
padding: 4px;
border-radius: 6px;
}

.topicUser {
width: 150px;
float: left;
background: #000;
margin-left: -10px;
min-height: 100%;
height: 100%;
}

.topicUser h3 {
margin-left: 2    .5px !important;
}

.topicUser small {
position: absolute;
margin-top: -15px;
margin-left: 7    .5px;
}

.topicUser p {
margin-top: 2px;
margin-left: 3px;
}

.topicContent {
width: 1060px;
float: right;
height: 100%;
}

.topicContent p {
padding: 5px;
}

Answer 1

把：

.forumContent li {
    padding: 0 0 0 10px; /* 5px 0 5px 10px */
    margin-left: -40px;
    min-height: 41px;
    overflow: auto;
    border-bottom: 1px solid #000;
    position: relative;
}

和

.topicUser {
    width: 150px;
    float: left;
    background: #000;
    margin-left: -10px;
    min-height: 100%;
    height: 100%;
    position:absolute;
}

注意位置属性。

看这里http://jsfiddle.net/9stPU/6/

Answer 2

您可以使用display:table;属性： DEMO

单个补丁来测试它;

li {
    display:table;
}
li > div {
    display:table-cell;
    float:none!important;/* float kills display; so do not use it with display; */
    vertical-align:top;
}

使外部div的内部div匹配高度

2 个答案: