Define height based on page content

user_19145795 0
Viewed 27

I'm trying to make a button which sticks to the left at 30vh. Problem is the height of parent div which is either too short or is causing page huge white space below footer.

<div class="click_here_for_a_quote_parent"><a href="/contact"><div class="click_here_for_a_quote_child">Click here for a quote</div></a></div>

styling of the parent div:

.click_here_for_a_quote_parent {
position: absolute;
top: 30vh;
left: 0;
z-index: 999999;
height: 100%;}

the height attribute above is the problematic line.

styling of child div:

.click_here_for_a_quote_child {
writing-mode: vertical-lr;
transform: rotate(-180deg);
background-color: #f25924;
color: #fff;
padding: 16px;
font-size: 24px;
font-family: Roboto, sans-serif;
position: sticky;
position: -webkit-sticky;
left: 0;
top: 30vh;
display: inline-block;}

Any suggestions?

css html
1 Answers

Ok, apparently everything I needed is to change position from absolute to fixed on the parent div and delete position and display from child one.

Silly thing, hopefully will help someone in the future!

user_191457950
Related