Question

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

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

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

我正在尝试使用: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: '';
}

Answer 1

尝试此更新的css，显示：table; ＆安培; display：table-row： -

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

Answer 2

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

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

2 个答案: