How do I place a flexbox to the bottom of my web?

Question

So I created this flexbox, how can I place it in the bottom of the page? I tried with margin-top but it's relative to the element above i so I does not work for me; margin-bottom does not work with flexboxes seems. I want something that places the flexbox on the bottom no matter what more elements I add and not having to scroll to see it.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        
        <style>
            
            .footer{
                display: flex;
                flex-direction: row;
                flex: 1;
                justify-content: center;
                align-items: flex-end;
                height: 50px;
                background-color:rgb(0, 234, 255);
                
            }
            .footer div{
                padding-inline: 25px;
            }
            /* TEXTOS */
            .foot_txt{
                text-align: center;
                line-height: 50px;
                font-size: 15px; 
            }
            .foot_txt a{
                text-decoration: none;
            }
            .foot_rs div{
                font-size: 15px;
            }
            /* IMAGENES DEL FOOTER */
            .foot_rs img{
            width: 30px;
            margin: auto;
            display: block;
            }
        
        </style>
    
    </head>
    
    <body>
        <div class="footer">
            
            <div class="foot_txt">
                <a href="contacto.html" target="_blanck">Contacto</a>
            </div>
        
    
            
            <div class="foot_rs">
                <a href="https://www.facebook.com/" target="_blanck"><img class="iconredes" src="icon/iconofacebook.png" /></a>
                <div class=>
                Facebook
                </div>
            </div>
                
            <div class="foot_rs">
                <a href="https://www.instagram.com/" target="_blanck"><img class="iconredes" src="icon/iconoinstagram.png" /></a>
                <div class=>
                Instagram
                </div>
            </div>
                
            <div class="foot_rs">
                <a href="https://twitter.com/" target="_blanck"><img class="iconredes" src="icon/iconotwitter.png" /></a>
                <div class=>
                Twitter
                </div>
            </div>
            
             
    
            <div class="foot_txt">
                <a href="quienessomos.html" target="_blanck">Quiénes somos</a>
            </div>
        
        </div>
    </body>
    </html>

there is a similar question here with answers that could just help you: https://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height-b — mw509, Mar 03 '21 at 12:09
Does this answer your question? [CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page](https://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height-b) — mw509, Mar 03 '21 at 12:09

score 0 · Answer 1 · answered Mar 03 '21 at 12:11

Using "position: absolute" you can set your footer in bottom of the page.

.footer {
    position: absolute;
    width: 100%;
    bottom: 0;
}

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        
        <style>
            
            .footer{
                display: flex;
                flex-direction: row;
                flex: 1;
                justify-content: center;
                align-items: flex-end;
                height: 50px;
                background-color:rgb(0, 234, 255);
               
            }
            .footer div{
                padding-inline: 25px;
            }
            /* TEXTOS */
            .foot_txt{
                text-align: center;
                line-height: 50px;
                font-size: 15px; 
            }
            .foot_txt a{
                text-decoration: none;
            }
            .foot_rs div{
                font-size: 15px;
            }
            /* IMAGENES DEL FOOTER */
            .foot_rs img{
            width: 30px;
            margin: auto;
            display: block;
            }
        
        </style>
    
    </head>
    
    <body>
        <div class="footer">
            
            <div class="foot_txt">
                <a href="contacto.html" target="_blanck">Contacto</a>
            </div>
        
    
            
            <div class="foot_rs">
                <a href="https://www.facebook.com/" target="_blanck"><img class="iconredes" src="icon/iconofacebook.png" /></a>
                <div class=>
                Facebook
                </div>
            </div>
                
            <div class="foot_rs">
                <a href="https://www.instagram.com/" target="_blanck"><img class="iconredes" src="icon/iconoinstagram.png" /></a>
                <div class=>
                Instagram
                </div>
            </div>
                
            <div class="foot_rs">
                <a href="https://twitter.com/" target="_blanck"><img class="iconredes" src="icon/iconotwitter.png" /></a>
                <div class=>
                Twitter
                </div>
            </div>
            
             
    
            <div class="foot_txt">
                <a href="quienessomos.html" target="_blanck">Quiénes somos</a>
            </div>
        
        </div>
    </body>
    </html>

How do I place a flexbox to the bottom of my web?

1 Answers1