How to fix button at the bottom of a page without moving?

Question

I have a page with navbar and with a div which contains a logo, a paragraph with text and then a button, all in the same div, each component below the other in the order referred to above.

My question is, the description is not me I’m going to do and therefore I don’t know how big it’s going to be, I know it’s not going to be very elaborate but I still wanted to ask if it’s possible to make the button below the description not move, when the description decreases or increases. I mean, every time I lower the description he comes up and every time I raise he goes down.

I’ve tried it with overflow: hidden, and various other ways that I’ve been seeing here on Stackoverflow and Google, but so far I haven’t found anything that works.

.desc-div{
    top: 0;
    bottom: 0;
    overflow: hidden;
    margin-bottom: 15px;
    text-align: center;
    min-height: 100%;

}

.logo {
    position: relative;
    width: 55px;
    height: 55px;
    margin-top: 6%;
}

.desc {
    font-size: 15px;
    color: white;
    position: relative;
    margin-top: 6%;
    margin-bottom: 10%;
    padding: 2%;
}

.desc-div2 {
    height: 100%;
}


.desc-div2 svg {
    position: relative;
    width: 40px;
    text-align: center;
    cursor: pointer;
    z-index: 2001;
    margin-left: 15px;
}

<div class="desc-div header pt-lg-8 align-items-center"> 
    <div class="desc-div2 container-fluid align-items-center">
        <img class="logo" src="/img/logo.svg">
        <p class="desc"><%= __('Hi hello my name is, and I live next door...............................') %></p>
        <a>
            <svg x="0px" y="0px" viewBox="0 0 30 28" xml:space="preserve">
                <path fill="#D9BD45" d="M28.97,20.884c0.558,0,1.03,0.475,1.03,1.035v5.047C30,27.569,29.528,28,28.97,28H1.028 C0.472,28,0,27.569,0,26.965v-5.047c0-0.559,0.472-1.035,1.028-1.035H28.97z"/>
                <path fill="#D9BD45" d="M28.496,0.179L15,10.61L1.504,0.179C0.894-0.271,0,0.179,0,0.955V6.6c0,0.288,0.162,0.655,0.284,0.737 L15,18.231L29.716,7.337C29.838,7.256,30,6.888,30,6.6V0.955C30,0.179,29.106-0.271,28.496,0.179z"/>
            </svg>
        </a>
    </div>
</div>

Answer 1

Use position: absolute with bottom: 15px in the svg it will be fixed at the bottom of the screen, without being influenced by the paragraph or other element, because it will be positioned absolutely inside the div.

That one 15px at the bottom you put the value you want and find it best to give a spacing of the bottom.

Now, we need to add...

html, body{
   height: 100%;
}

...so that the div can have the height of 100%, as you want in min-height: 100%;. I also don’t see function for tag <svg> be inside that <a>. You don’t need the margin-left: 15px in svg, that’s why I left this line commented in CSS below:

html, body{
   background: #000;
   height: 100%;
}

.desc-div{
    top: 0;
    bottom: 0;
    overflow: hidden;
    margin-bottom: 15px;
    text-align: center;
    min-height: 100%;

}

.logo {
    position: relative;
    width: 55px;
    height: 55px;
    margin-top: 6%;
}

.desc {
    font-size: 15px;
    color: white;
    position: relative;
    margin-top: 6%;
    margin-bottom: 10%;
    padding: 2%;
}

.desc-div2 {
    height: 100%;
}


.desc-div2 svg {
    position: absolute;
    width: 40px;
    text-align: center;
    cursor: pointer;
    z-index: 2001;
    /*margin-left: 15px; removido */
    bottom: 15px;
}

<div class="desc-div header pt-lg-8 align-items-center"> 
    <div class="desc-div2 container-fluid align-items-center">
        <img class="logo" src="/img/logo.svg">
        <p class="desc">Hi hello my name is, and I live next door</p>
         <svg x="0px" y="0px" viewBox="0 0 30 28" xml:space="preserve">
             <path fill="#D9BD45" d="M28.97,20.884c0.558,0,1.03,0.475,1.03,1.035v5.047C30,27.569,29.528,28,28.97,28H1.028 C0.472,28,0,27.569,0,26.965v-5.047c0-0.559,0.472-1.035,1.028-1.035H28.97z"/>
             <path fill="#D9BD45" d="M28.496,0.179L15,10.61L1.504,0.179C0.894-0.271,0,0.179,0,0.955V6.6c0,0.288,0.162,0.655,0.284,0.737 L15,18.231L29.716,7.337C29.838,7.256,30,6.888,30,6.6V0.955C30,0.179,29.106-0.271,28.496,0.179z"/>
         </svg>
    </div>
</div>