Hi guys I Developed a reactjs application where a user can post their products the problem is that i have bottom bar div from top 160vh and position is fixed and I must show 5 products on the page and below its I showed bottom bar when description of products is sufficient then there is no issue and when I have long description then my bottom bar component is shown up and products showing its below , how to show it always below the five products and also in different pages bottom bar component how to show always below. my code of css is

bottom bar container

.bottom-bar-container {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  width: 100%;
  background-color: rgb(194, 188, 188);
  position: absolute;
  top: 160vh;
  height: 25vh;
  font-family: "Poppins";
}

and app-container where i render all products

.app-container {
  width: 100%;
  padding-top: 70px;
}
``````
how to show always it below 
i also attached image of my app plz see it.


  https://i.stack.imgur.com/E1aPd.png

CodePudding user response：

• If you wanna show it always below, then user bottom:0 instead of top:160vh
• Make the parent component's position relative like:-

.app-container{
     position:relative;
 }

CodePudding user response：

If you would like your footer to stay at the bottom of your page, try using the absolute value for the position property. Here is how you would use that in your code...

.app-container {
  width: 100%;
  padding-top: 70px;
  
  /* New code */
  position: relative;
}

.bottom-bar-container {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  width: 100%;
  background-color: rgb(194, 188, 188);
  height: 25vh;
  font-family: "Poppins";
  
  /* New code */
  position: absolute;
  bottom: 0;
  left: 0;
}