1
두 개의 요소가있는 단추로 배경을 슬라이드하고 싶습니다.부트 스트랩 하위 요소 높이 100 %
하지만 다른 요소가 더 클 때도 두 요소가 수직으로 중심에 있고 높이가 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%;
}
데모
당신이 날 도와 줄 수있다? :(
아니, 고정 폭을 필요가 없습니다 가 동적 옵션이 없습니다 :?.?/ – CutmastaD
@CutmastaD 수 버튼의 고정 높이를 설정 했습니까? https://jsfiddle.net/bnb0Lswu/ – JBartus
아니요, 불행히도 아닙니다. 나는 뭔가를 작업했지만 작은 div의 높이는 부모 높이의 100 %를 얻지 못합니다. https : //jsfiddle.net/e07uc4kj/12/ – CutmastaD