No logro asignarle a un div el height que debe tener, quiero que el obtenga el maximo height dentro de su div padre.
Intento y este es mi resultado:
Quiero obtener un resultado como este:
Este es el código que tengo:
.dummy {
margin-top: 100%;
}
.thumbnail_white {
border: solid 3px #fff;
background-color: #fff;
position: absolute;
padding-top: 2%;
top: 15px;
bottom: 0;
left: 15px;
right: 0;
}
.thumbnail_white:hover {
border: solid 3px #E8E8E8;
background-color: #FFFDDE;
}
.thumbnail_center {
height:100%;
border: 3px solid green;
text-align: center;
vertical-align: middle;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/css/dataTables.bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.4/css/bootstrap-dialog.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.4/js/bootstrap-dialog.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="dummy"></div><div class="thumbnail_white">
<div class="col-lg-2 col-md-3 col-sm-4 hidden-xs">
<span class="hidden-xs fas fa-table fa-3x"></span>
</div>
<div class="col-lg-10 col-md-9 col-sm-8 col-xs-12">
<span style="font-weight: bold;">Mesa 02</span>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"><hr class="hr_style">
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<span class="thumbnail_center col-lg-12 col-md-12 col-sm-12 col-xs-12">Disponible</span>
</div>
</div>
</div>
Disculpen, no se me da muy bien el css.