Home / Questions / 246207
Accepted
bypabloc_
Asked: 2020-03-16 14:25:43 +0800 CST 2020-03-16 14:25:43 +0800 CST

Height of a div and center content in css

  • 772

I can't assign a div the height it should have, I want it to get the maximum height within its parent div.

I try and this is my result:

mistake

I want to get a result like this:

mistake

This is the code I have:

.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>

Sorry, I'm not very good with css.

css

1 Answers

  1. Best Answer

    Try to use this. I made a new structure to clean up the code a bit and avoid unnecessary elements like columns. In addition to taking advantage of the benefits of 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>

    • 9