使引導跨度填充容器高度明智

在化妝頁面看到[內容] [Instagram的] [博客]

我身邊的Instagram和博客一箱的影子。

我想那個盒子陰影延伸到內容區域的底部。

我試圖

#undrl { 

    height:100%; 
}

，但什麼也沒做。

有什麼想法？這個自定義HTML模塊

更新代碼是

<div class="span6"> 
<p style="text-align: center;"><strong style="color: #333333; font-family: 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif; line-height: normal;"><span style="font-size: medium; font-style: italic;">Join. Create. Compete.&nbsp;</span></strong></p> 
<div style="color: #333333; font-family: 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif; line-height: normal; text-align: center;">&nbsp;</div> 
<div style="color: #333333; font-family: 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif; line-height: normal; text-align: center;">get2gether|sports is the perfect way to organize a pick-up game of any sport. You can find a game to join, or create your own! Feel free to shoot us an email with any questions you have!&nbsp;</div> 
<div style="color: #333333; font-family: 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif; line-height: normal; text-align: center;">&nbsp;</div> 
<div style="color: #333333; font-family: 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif; line-height: normal; text-align: center;">Subscribe below to stay in-touch with up-coming games!&nbsp;<br /><br /></div> 
{loadposition login-join} {loadposition logout-home}</div> 
<div id="undrl" class="span3" style="text-align: center;">{loadposition instagramfeed}</div> 
<div id="undrl" class="span3" style="text-align: center;">{loadposition blogfeed}</div> 
</div>

來源

2014-11-15 Web Dev

，因爲你的專欄，[內容] [Instagram的] [博客]，浮動離開，他們將只在需要佔據儘可能多的空間。爲了解決這個問題：

.item-page { 
display: table; 
height: 280px; 
} 

.item-page > div { 
float: none; 
display: table-cell; 
margin-left: 20px; 
vertical-align: middle; // or padding-top % if you don't want to declare a height on the table 
} 
.item-page > div:first-child 
{ 
margin-left: 0; 
}

這裏有一個更好的解決方案不使用表細胞（在一個div包裹這些項目，並設置高度爲280像素，如果多行）：

.item-page 
{ 
height: 280px; 
} 

#undrl { 
text-align: center; 
display: inline-block; 
float: none; 
margin-left: 20px; 
height: 100%; 
vertical-align: top; 
width: 23%; 
} 

.item-page .span6 
{ 
float: none; 
display: inline-block; 
}

來源

2014-11-15 22:22:19

那什麼都沒做。 –

如果我添加更多圖片或博客我需要它是可擴展的。也許我應該找出所有的博客和照片的最大高度，然後只是設置它 –

當我用Chrome的檢測工具改變你的網站時，我沒有這個CSS的問題。如果是這樣的話，請將[content] [instagram] [blog]項目包裝在div中，這樣它就是自己的行，併爲其設置最大高度。 –

這並不工作，因爲Instagram的和博客部分有float: left;，它打破了文檔流。如果向後兼容性是不是最大的問題，我建議使用flex-box，因爲這將允許您控制元素的大小和其內容的位置。這項技術是由近90％的瀏覽器（source）的支持。

如果您不能使用柔性盒，嘗試所有的要素設置爲預定的高度，這樣的盒子陰影將一直延續到你想要延長高度。

如果這也不是一個選項（例如，您需要元素具有可變高度），那麼您可能會從使用display: table;和display: table-cell;中受益。這些CSS聲明將允許最多向後兼容性，但因爲他們是稍微過時的他們是不是我的最愛。它會這樣工作：

.container { 
    display: table; 
} 

.child { 
    display: table-cell; 
}

這應該是一個很好的起點，你想要的結果。

來源

2014-11-15 22:22:01

我個人不介意兼容性問題，但我知道我的客戶會。 –

然後，我會採用基於表格的方法。它適用於[幾乎每個瀏覽器]（http://caniuse.com/#search=table）。 –

使引導跨度填充容器高度明智

回答

相關問題