CSS底部边框不出现在左右列中

Question

帮助！我在这里和每个教程都在线阅读了每个问题……但是我似乎无法使左右列的底部边框出现在我试图放在一起的布局上。

这是我目前正在处理的链接。

谁能告诉我我做错了什么？

我当前的CSS是：

.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
    margin-right: 20px;
    background: white url(http://i1109.photobucket.com/albums/h423/thesinglemomoirs/templates/pinkcupcake/38d73024.png) repeat scroll top left;
    border: 2px solid black;
}
.fauxcolumn-outer .fauxborder-left, .fauxcolumn-outer .fauxborder-right, .fauxcolumn-inner {
    height: 100%;
}

Answer 1

解决问题的解决方案是设置盒子大小这样：

.fauxcolumn-inner {
    box-sizing: border-box;
}

您的问题是，当您将高度设置为100％时，没有盒子大小到边框框：

.fauxcolumn-outer .fauxborder-left,
.fauxcolumn-outer .fauxborder-right,
.fauxcolumn-inner {
    height: 100%
}

然后添加边距，填充或边界，您的真实高度最终大于100％

Answer 2

您可以用内部盒子阴影替换边框，而不会模糊：

box-shadow: inset 0 0 0 2px #000000;

Answer 3

.yourclass {
    border-bottom:thick solid black;
}