Bootstrap 子元素高度 100%

Question

我想要一个包含 2 个元素的按钮来滑动背景。

但我希望两个元素都垂直居中并获得 100% 的高度，即使另一个元素更大。

这是HTML

<button class="btn-cstm-slide">
    <div class="btn-cstm-slide-logo"><span>Test Test 14343</span></div>
    <div class="btn-cstm-slide-text">
        <span>Just a Testtest</span>
        <br/>
        <span>Let's see</span>
    </div>
</button>

这里是 CSS

    .btn-cstm-slide {
    height: 100%;
    padding: 0px;
    display: flex;
    position: relative;
    text-decoration: none;
    overflow: hidden;
    background: #333C42;

    border: none;
    box-shadow: 0px 1px 1px rgba(0,0,0,.1);
}
.btn-cstm-slide-logo {
    height:100%;

    min-height:100%;
    margin: 0;
    padding: 10px;
    position: relative;
    text-decoration: none;
    background: #474f54;
    color: #fff;
}
.btn-cstm-slide-text {
    padding: 10px;
    position: relative;
    text-decoration: none;
    background: #333C42;
    color: #fff;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.btn-cstm-slide-text * {
    position:relative;
}

.btn-cstm-slide-text:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0;
    bottom: 0;
    left:0;
    background-color: #474f54;
    -webkit-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
}
.btn-cstm-slide-text:hover:before {
    width: 100%;
}

演示

FIDDLE

你能帮帮我吗？ :(

Answer 1

这是你想要的吗？

https://jsfiddle.net/e07uc4kj/9/

.btn-cstm-slide {
    height: 100%;
    padding: 0px;
    display: flex;
    position: relative;
    text-decoration: none;
    overflow: hidden;
    background: #333C42;

    border: none;
    box-shadow: 0px 1px 1px rgba(0,0,0,.1);
}
.btn-cstm-slide-logo {
    padding: 10px;
    min-width: 80px;
    position: absolute;
    top: 0px;
    bottom: 0px;
    text-decoration: none;
    background: #474f54;
    color: #fff;
    vertical-align: middle;
}
.btn-cstm-slide-text {
    margin-left: 100px;
    padding: 10px;
    position: relative;
    text-decoration: none;
    background: #333C42;
    color: #fff;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.btn-cstm-slide-text:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0;
    bottom: 0;
    left:0;
    background-color: #474f54;
    -webkit-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
}
.btn-cstm-slide-text:hover:before {
    width: 100%;
}

Bootstrap 子元素高度 100%

Bootstrap children element height 100%

html

css

height

twitter-bootstrap-3