2014-02-19 46 views
0

我还有一个关于css自动调整内容大小的问题。我在旁边有三个div,都需要是相同的长度,但是这个长度是由最长的div设定的,而不是永久的。我试图做一些类似于我在前面提到的(How to make a div's width stretch between two divs)问题中的答案,但没有成功地设置div的高度。如何使用另一个div的高度自动设置div的高度

三个div是设定的宽度。

HTML:

<div id="content"> 
    <div id="bodySideBar"> 
     a 
     <br><br><br> 
     b 
    </div> 
    <div id="bodyUpdateBar"> 
     a 
     <br><br><br><br><br><br><br><br><br> 
     b 
    </div> 
    <div id="bodyContent"> 
     a 
     <br><br><br><br><br><br> 
     b 
    </div> 
</div> 

CSS:

#content { 
    width: 100%; 
    height: 100%; 
    padding: 0; 
    margin: 0; 
    display: inline; 
} 

#bodyContent { 
    display: block; 
    float: none; 
    width: auto; 
    height: 100%; 
    background: #FFC273; 
} 

#bodySideBar { 
    display: inline-block; 
    float: left; 
    width: 50px; 
    height: 100%; 
    background: #BF8130; 
} 

#bodyUpdateBar { 
    display: inline-block; 
    float: right; 
    width: 200px; 
    background: #FFCA40; 
} 

的jsfiddle:http://jsfiddle.net/ueXR9/

注:我把
S IN表明,其他部分没有被强制调整到最长的div。另外,如果您有任何不明白的地方,我很抱歉,因为我的睡眠时间不足5小时,无法集中一半时间。

回答

0

也许它可能与显示:表。

http://jsfiddle.net/ueXR9/1/

CSS:

#content { 
    width: 100%; 
    height: 100%; 
    padding: 0; 
    margin: 0; 
    display: table; 
} 
#bodyContent { 
    display: table-cell; 
    float: none; 
    width: auto; 
    height: 100%; 
    background: #FFC273; 
} 
#bodySideBar { 
    display: table-cell; 
    width: 50px; 
    height: 100%; 
    background: #BF8130; 
} 
#bodyUpdateBar { 
    display: table-cell; 
    width: 200px; 
    background: #FFCA40; 
} 

HTML:

<div id="content"> 
    <div id="bodySideBar">a 
     <br> 
     <br> 
     <br>b</div> 
    <div id="bodyUpdateBar">a 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br>b</div> 
    <div id="bodyContent">a 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br>b</div> 
</div> 
+0

我只是看着所附的jsfiddle,这似乎打破我已经设置了格式,其中间距看着就像我在jsfiddle中的结果(在这里找到:http://jsfiddle.net/ueXR9/)。我需要将div的位置与我在jsfiddle中的相同。 –

+0

我得到它的工作。我不得不重新安排div来获取正确的位置和间距。谢谢! –

相关问题