2014-06-14 98 views
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; 
} 

回答

0

看看你可以使用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; 
} 
0

地說:

.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; 
} 

通知position屬性。

這裏http://jsfiddle.net/9stPU/6/

+0

它在JSFiddle上工作,但是當我將它應用到我的網站使用多個列表項時,它就像這樣http://jsfiddle.net/9stPU/11/ – user3740791