1
因此,我正在開發一個小論壇,並遇到了一個小小的設計問題。每篇文章中的側邊欄應該與內容的高度(所寫的文字)相匹配,但邊欄只能達到顯示所有內容所需的高度,然後停止。讓內部div匹配外部div的高度
的jsfiddle:http://jsfiddle.net/9stPU/5/
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;
}
它在JSFiddle上工作,但是當我將它應用到我的網站使用多個列表項時,它就像這樣http://jsfiddle.net/9stPU/11/ – user3740791