0

I followed this tutorial to create a footer.

And i created a footer like this(without any content in body):

 
body{

    min-height: 100vh;
    display: flex;
    flex-direction: column;
   
}  
footer{
    margin-top: auto;
    background-color: greenyellow;
}

.card {
  
  max-width: 400px;
    margin: 0auto;
  text-align: center;
  font-family: arial;
  border-style: solid;
  border-width: 6px;
  position:  relative;
  top: 611px;
  margin-bottom: 33px; 
  margin-right: 33px;
  float: left;
  
  
}

 




.card img{

  height: 400px; 
    width: 400px;
  vertical-align: middle;
 
 
}

.price {background-color: #f44336;
    font-size:22px;
    border-radius: 3px;
    position: absolute;
    bottom: 0px;
  right: 0px;
  padding: 3px;




}

.card button {
  border: none;
  color: white;
  background-color: #000;
  position: relative ;
  cursor: pointer;
  width: 100%;
  height: 100px;
  font-size: 44px;
  align-items: center;



  


}

.card button:hover {
  opacity: .5;
  background-color: #330;


}
 

#id{
    background-color: palevioletred;
    color: white;   
    margin: 0; 
    font-size: 17px;
}
 
 
.number{
    width: 50px;
    height: 50px;
    background-color: #330;
    color: yellow;
    border-radius: 50%;
    position: absolute;
    top: -22px;
    right: -22px;
    justify-content: center;
    align-items: center;
    display: flex;
    font-size: 22px;

}

 

@media  (max-width: 1864px){
    .card{
        max-width: 300px;
    }
     
    .price{

        font-size:20px;

    }

    .card img{
        height: 300px; 
        width: 300px;



}
{% load static %}
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet"   href="{% static 'main.css' %}">
    <h1>header</h1>
    
</head>
<body style="background-color: #36454F;">



 
    <footer class="footer">
        <h3 >hello</h3>

    </foote>     

</body>
</html>

i added some contents to the body of html like this in django with for loop:

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet"   href="{% static 'main.css' %}">
    <h1>header</h1>
    
</head>
<body style="background-color: #36454F;">




    {% for i in p%} 
 
                <div class='card'>
                    <div class="number">{{i.Number}}</div>
                    <img src="{{i.image}}"></img>
                    <p id="id">{{i.description}}</p>
                    <a href="{{i.buy}}" target='_blank' rel='noopener noreferrer'>
                        <button><span class="price"> ${{i.price}}</span> buy</button>
                    </a>    




                </div>



 
    {%endfor%}

    <footer class="footer">
        <h3 >hello</h3>
        
    </foote>     

</body>
</html>

But the footer is in not at the bottom of the web page:

image

What should i do to stick the footer to be always at the bottom of the products?

dfsdf
  • 7
  • 2

3 Answers3

0

You can use a container with position: relative; min-height: 100vh; and a footer with position: absolute as follows:

.container {
  position: relative;
  min-height: 100vh;
  padding-bottom: 50px; /* Height of the footer */
}

.content {
  height: 50px;
}

.footer {
  position: absolute;
  width: 100%;
  height: 50px;
  bottom: 0;
  background: grey;
}
<div class="container">
  <div class="content">
    Content
  </div>
  <div class="footer">
    Footer
  </div>
</div>

For longer content, it would look like this:

.container {
  position: relative;
  min-height: 100vh;
  padding-bottom: 50px; /* Height of the footer */
}

.content {
  height: 1000px;
}

.footer {
  position: absolute;
  width: 100%;
  height: 50px;
  bottom: 0;
  background: grey;
}
<div class="container">
  <div class="content">
    Content
  </div>
  <div class="footer">
    Footer
  </div>
</div>
Harun Yilmaz
  • 8,281
  • 3
  • 24
  • 35
  • Do not forget to set container padding-bottom to the height of footer, if you don't, then the footer and content might overlap. Also mayble good idea to always do initial css reset like: * {padding: 0; margin: 0} which eliminates white lines surrounding all the content and gives you a bit more control – Jiří Melen Jun 01 '22 at 09:25
  • Sure! I added that but removed it later to make it simpler. But yeah, it makes more sense to add it. – Harun Yilmaz Jun 01 '22 at 09:28
-1
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}
Moebius
  • 640
  • 4
  • 9
  • 2
    I think he meant at the bottom of the page, not fixed to the bottom of the viewport. – lucutzu33 Jun 01 '22 at 09:12
  • 2
    Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. – Mark Rotteveel Jun 01 '22 at 15:12
-1
.footer {
    position: absolute;
    bottom: 10px;
    width: 100%;
}


.body{
   position: relative;
   min-height: 100%;
   padding-bottom: 12rem;
}
NahidEbrahimian
  • 61
  • 1
  • 7