隐藏溢出时如何添加底部边框？答案

【问题标题】：How To Add Bottom Border When Overflow Is Hidden?隐藏溢出时如何添加底部边框？
【发布时间】：2014-11-19 00:48:37
【问题描述】：

隐藏溢出时如何添加下边框？

我正在使用margin-bottom: -10000px; padding-bottom: 10000px; trick/hack 让 div 填充其父容器，同时保持一切基于 %。唯一的问题，溢出隐藏了底部边框。

jsFiddle http://jsfiddle.net/CSS_Apprentice/0Lkxw1je/1/

我正在尝试使用 :after 添加底部边框，但无论我对 :after 选择器 (position: absolute, overflow: visible) 做什么，我都无法显示边框

body {
    width: 100%
}

.container {
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
}

.box {
    display: inline-block;
    width: 25%;
    height: 100%;
    border: 3px solid black;
    padding: 2%;
    vertical-align: top;
    margin-bottom: -10000px;
    padding-bottom: 10000px;
}

.box:after {
    border-bottom: 3px solid black;
    content: '';
}

【问题讨论】：

尝试显示：table-cell；在 .box 类中而不是 margin-bottom: -10000px; padding-bottom: 10000px;
它有效，但根据这篇文章：stackoverflow.com/questions/15939896/…“display:table-cell 旨在用于 display:table-row 内，它本身在 display:table 内。使用不当将导致正在创建的匿名元素可能会对布局的其他方面产生负面影响。”

标签： html css overflow border hidden

【解决方案1】：

试试这个更新的 css，带有 display: table; & 显示：表格行：-

body {
    width: 100%;
    display: table;

}

.container {
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
    display: table-row;

}

.box {
    display: inline-block;
    width: 25%;
    height: 100%;
    border: 3px solid black;
    padding: 2%;
    vertical-align: top;
    display: table-cell;
}

.box:after {
    border-bottom: 3px solid black;
    content: '';
}

.remainder {
    height: 100%;
}

h1 {
    background-color: #fff;
    border: 3px solid black;
}
/* Colors */
.blue {
    background-color: blue;
}
.green{
    background-color: green;
}
.yellow{
    background-color: yellow;
}
.red{
    background-color: red;
}

【讨论】：

【解决方案2】：

对我有用的是创建一个带边框且没有overflow:hidden 的外部 div。外框有边框，内框内容溢出。

【讨论】：