1
Ich möchte einen Button, mit 2 Elementen drin, um den Hintergrund zu verschieben.Bootstrap Kinder Element Höhe 100%
Aber ich möchte beide Elemente vertikal zentrieren und 100% Höhe erreichen, auch wenn das andere Element größer ist.
Hier ist der 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>
Und hier die 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%;
}
Demo
Können Sie mir helfen? :(
Nein, ich habe keine feste Breite benötigen Gibt es keine Möglichkeit, die dynamisch ist:?.?/ – CutmastaD
@CutmastaD Can Du hast eine feste Höhe für den Button festgelegt? https://jsfiddle.net/bnb0Lswu/ – JBartus
Nein, leider nicht. Ich habe etwas ausgearbeitet, aber die Höhe des kleineren div bekommt nicht 100% der Elternhöhe: https: //jsfiddle.net/e07uc4kj/12/ – CutmastaD