html - Sticky div remain in top corner permanently

Question

I have a 'Book Now' button that sticks to the top of the viewport at 10px gap. The parent element has height of 100%, which means scrolling past 100%-worth of height makes the 'Book Now' div scroll out of view. See here.

How can I make the parent element 100% of the full webpage height, so the 'Book Now' div always sticks to the top?

HTML:

<div class="book font">
        <a href="index.html">BOOK NOW</a>
</div>

CSS:

.book {
position: absolute;
height: 100%;
z-index: 100;
margin-top: 80px;
margin-right: 10px;
right: 0;
top: 0;
}

.book a {
    position: sticky;
    top: 10px;
    text-decoration: none;
    color: #1e1e1e;
    border: 4px solid #cfac44;
    background: #cfac44;
    padding: 10px 15px;
    transition: .2s;
    -webkit-transition: .2s;
}

Answer 1

Your problem can be solved without position: fixed, keeping position: sticky.

Add position: relative for the body style:

body {
    ...
    position: relative;
}

And add bottom: 0 for .book selector. This will stretch this div to the very bottom of the body tag:

.book {
    ...
    bottom: 0;
}