Question

网站是get2gethersports.com

在制作页面上，您会看到[内容] [instagram] [博客]

我在Instagram和博客周围有一个盒子阴影。

我想让那个盒子阴影延伸到内容区域的底部。

我试过

#undrl {

   height:100%;
}

但它没有做任何事。

任何想法？

此自定义html模块的UPDATE代码是

<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>

Answer 1

这不起作用，因为Instagram和Blog部分有float: left;，这会破坏文档的流程。如果向后兼容性不是最大的问题，我建议使用flex-box，因为这样可以控制元素的大小和内容的位置。近90％的浏览器（source）都支持这种技术。

如果您不能使用弹性盒，请尝试将所有元素设置为预定义的高度，这样盒子阴影将延伸到您希望它扩展的高度。

如果这也不是一个选项（例如，您需要具有可变高度的元素），那么您可能会因使用display: table;和display: table-cell;而受益。这些CSS声明将允许最向后兼容，但它们不是我的最爱，因为它们有点过时。它可以这样工作：

.container {
    display: table;
}

.child {
    display: table-cell;
}

这应该是你想要的结果的一个很好的起点。

Answer 2

由于您的列[content] [instagram] [blog]向左浮动，因此它们只会占用所需的空间。解决这个问题：

.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中，如果有多行，则将高度设置为280px）：

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

使bootstrap跨度填充容器高度明智

2 个答案: