How to fit text at the bottom inside a div element?-CodePudding

I am trying to make a footer for a div element, with a <p> tag, however, depending on the font size, the footer would be outside of the box. How can I make it align at the bottom of the page, with correct padding?

Here's the HTML & CSS file:

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
body {
  background-color: #202020;
  font-family: 'Montserrat', sans-serif;
  color: #ffffff;
}

#list {
  width: 70%;
  height: 250px;
  padding: 10px;
  overflow: auto;
  background-color: #303030;
  color: white;
}

.currency {
  background-color: #202020;
  height: 20%;
  color: white;
}

.currency-flag {
  float: left;
  padding: 5px;
}

.currency-name {
  text-align: left;
  font-size: 120%;
  /* padding-top: 5px; */
}

.currency-value {
  text-align: left;
  font-size: 50%;
}

<center>
  <div id="list">
    <div >
      <img  src="flags/eur.svg"></img>
      <p >European Euro</p>
      <p >1 R$ = 2 EUR</p>
    </div>
  </div>
</center>

CodePudding user response：

The problem is that you have set fixed height to .currency insted of height:20% use height:auto;

 .currency {
        background-color: #202020;
        height: auto;
        color: white;
      }

to fixed it at botton use positions like

    #list {
        width: 70%;
        height: 250px;
        padding: 10px;
        overflow: auto;
        background-color: #303030;
        color: white;
        position: absolute;
        bottom: 0;
      }

CodePudding user response：

    .currency {
  background-color: #202020;
  height: auto;
  color: white;
}

Set the height property to auto instead of fixing it it will make your p tag inside the div

One suggestion :- Do not use the center dag as its outdated instead try to do similar thing with css property of text-align center