3

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:

error

Quiero obtener un resultado como este:

error

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.

1
  • Te sirvio mi respuesta??
    – IvanS95
    Commented el 19 mar. 2019 a las 18:09

1 respuesta 1

9

Intenta usar esto. Hice una estructura nueva para limpiar un poco el codigo y evitar elementos innecesarios como las columnas. Ademas de sacarle un poco de provecho a los beneficios de Flexbox

.thumbnail {
  height: 250px;
  width: 250px;
  padding: 10px;
  border: 3px solid transparent;
}

.thumbnail:hover {
  background-color: #FFFDDE;
  border: solid 3px #E8E8E8;
}

hr {
  margin: 10px 0;
}

.content {
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  border: 3px solid green;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<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">


<div class="thumbnail d-flex flex-column">
  <header class="d-flex align-items-center">
    <i class="hidden-xs fas fa-table fa-3x mr-2"></i>
    <span>Mesa 02</span>
  </header>

  <hr>

  <div class="content d-flex">
    <span>Disponible</span>
  </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.