Стиль кнопки
Всем привет, столкнулся с проблемой в фронтед разработке с следующими стилями:
<style>
.container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
max-width: 90%;
margin: 0 auto;
padding-bottom: -200px;
}
</style>
<style>
.video {
position: relative;
z-index: 1;
padding-bottom: -200px;
border-radius: 5px;
margin-top: -1px;
width: 100%;
height: 100%;
margin-bottom: -20px;
background: transparent url('/medio/free-icon-play-button-2765018.png')no-repeat center;
background-size: 20%;
padding-top: 56.25%;
}
.video:hover {
cursor: pointer;
}
</style>
<style>
.video iframe {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width: 100%;
height: 100%;
}
</style>
<style>
.vol{
font-size: 30px;
margin-left: 99px;
margin-bottom: 10px;
}
</style>
<style>
.ready {
padding: 0px;
padding-bottom: -200px;
margin-top: 0px;
}
</style>
<style>
.video.ready{
padding-bottom: 0px;
}
</style>
<style>
max-width: 50%;
float: left;
margin-top: 50px;
margin-left: 90px;
}
</style>
<style>
.button1 {
width: 50%;
max-height: 100%;
min-height: 100%;
max-width: 10s0%;
margin-top: 0px;
background: green;
border: none;
position: relative;
z-index: 1;
}
</style>
<style>
.cen1 {
margin-bottom: 0px;
padding-bottom: 0px;
}
</style>
<div class="container">
<div class="video">
<center class="cen1">
<button ondblclick="toggleFullScreen()" id="play-button" class="button1"></button>
</center>
</div>
</div>
Кто сможет подсказать почему элемент с классом button1 не принимает значения height: 100%
для элемента container и video.
Кто подскажет большое спасибо.