Issue
I've been scouring a few dozen different pages to try to find a solution that applies to the situation I have.
I am creating a portfolio website with my projects, but the footer is behaving abnormally to resizing.
When I use
footer{
position: absolute;
z-index: -100;
left: 0;
bottom: 0;
width: 100%;
height: 200px;
}
This is the result I get at 100% zoom: 1920x1080 * 100% (Perfect)
This is the result I get at 125% zoom:
1920x1080 * 125% (Overlap between <body><div><p>
& <footer>
)
As you can see, my <p>
contents begin to overlap with the footer element.
When I use the sticky positioning, footer{ position: sticky;}
, the footer floats up and attaches itself to the bottom of {p}
As shown here. I thought of two solutions but neither worked, ideally I would like the <body>
to encompass at least (the entire screen - the size of the footer) (and whatever other elements that are not in the body) and have the footer as sticky. How would I go about doing this?
Solution
Normally to fix it you need to set width and heigth with the size vw and vh.
vw -> It's width the screen. vh -> It's height of the screen.
In your tag <body>
set width: 100vw
and height: 100vh
.
Note: Another thing "position: absolute
" uses its parent to reposition itself
Answered By - Tonielton Mota
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.