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

在化妆页面看到[内容] [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）。 –

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

回答

相关问题