My webpage has a 'Book Now' button that remains at the top of the viewport with a 10px gap. However, due to the parent element having a height of 100%, the button scrolls out of view once the viewport surpasses that height. To see an example, click here.
Is there a way to make the parent element 100% of the entire webpage height, ensuring that the 'Book Now' button always remains at the top?
Here is the HTML code:
<div class="book font">
<a href="index.html">BOOK NOW</a>
</div>
And the CSS code:
.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;
}