1

tenho uma "dashboard-box" com 3 divs filhos principais e gostaria de fixar a última div "box-rodapeGrafico" na parte inferior do box, somente essa div, como faço?

Quero colocar a Div da mensagem "Ultima atualização" grudado na parte inferior.

inserir a descrição da imagem aqui

.dashboard-box {
    border-radius: 1em;
    display: flex;
    flex-direction: column;   
    padding: 20px;
    width: 100%;
    max-width: 650px;
    height: 410px;
    background-color: white;
    margin: 0 12px;
}
<div class="dashboard-box" style="max-width: 1100px;height: 510px;">

                    <div style="display:flex;border-bottom-style: solid;border-bottom-color: aliceblue;">
                        <div class="boxIconGrafico box1">
                            <img src="~/images/pie-chart (1).png" width="35" />
                        </div>
                        <span class="tituloGrafico">Casos Investigados (Homicidios e Feminicidios)</span>
                    </div>
                    <div style="display:flex;">
                        <div class="grafico" id="" style="width:500px; height:250px">
                            <canvas id="GrCasos"></canvas>
                        </div>

                        <div class="grafico" id="" style="width:500px; height:250px">
                            <canvas id="GrRegistros"></canvas>
                        </div>
                    </div>
                    <div class="box-rodapeGrafico">
                        <span class="material-icons">update</span>Ultimo atualização: 22/12/2020
                    </div>

                </div>

1 Resposta 1

3

Como o seu container Pai é flex, basta colocar um margin-top: auto na última div que é o seu rodapé

inserir a descrição da imagem aqui

Segue código da imagem acima:
(adicionei uma borda só para ficar mais fácil de ver que ficou alinhado na base do Pai)

.dashboard-box {
  border-radius: 1em;
  display: flex;
  flex-direction: column;
  padding: 20px;
  width: 100%;
  max-width: 650px;
  height: 410px;
  background-color: white;
  margin: 0 12px;
  
  border: 1px solid black;
}
.box-rodapeGrafico {
  margin-top: auto;
}
<div class="dashboard-box" style="max-width: 1100px;height: 510px;">

  <div style="display:flex;border-bottom-style: solid;border-bottom-color: aliceblue;">
    <div class="boxIconGrafico box1">
      <img src="~/images/pie-chart (1).png" width="35" />
    </div>
    <span class="tituloGrafico">Casos Investigados (Homicidios e Feminicidios)</span>
  </div>

  <div style="display:flex;">
    <div class="grafico" id="" style="width:500px; height:250px">
      <canvas id="GrCasos"></canvas>
    </div>

    <div class="grafico" id="" style="width:500px; height:250px">
      <canvas id="GrRegistros"></canvas>
    </div>
  </div>

  <div class="box-rodapeGrafico">
    <span class="material-icons">update</span>Ultimo atualização: 22/12/2020
  </div>

</div>

2
  • 1
    Perfeito! Obrigado.
    – user198468
    5/01/2021 às 14:30
  • 1
    @MizrainPhelipeSá. sem problemas, mas lembre de sempre deixar a div do footer por último dentro do pai ;)
    – hugocsl
    5/01/2021 às 14:53

Você deve fazer log-in para responder a esta pergunta.