CODEWITHSUNDEEP
htmlcss
Software Dev
Software Dev

Reputation: 41

Define height based on page content

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?

Upvotes: 2

Views: 34

Answers (1)

Software Dev
Software Dev

Reputation: 41

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!

Upvotes: 2

Related Questions