CSS CSS Layout Basics Getting Started with CSS Layout Creating a Sticky Footer

guram dgebuadze
guram dgebuadze
Front End Web Development Techdegree Student 4,122 Points

sticky footer

When subtracting footer height to 100vh do we also need subtract footer margin? I only needed to subract bottom margin, not top margin of the footer. is this right way?

2 Answers

Aaron Mckenzie-Hunte
Aaron Mckenzie-Hunte
10,741 Points

You should only be subtracting the total number of pixels for your footer. You do not subtract top/bottom margin independently.

you can use the position : fixed with bottom:0

<html> <head> <style> .test-css{ height: 50px; width: 100vw; background: red; position: fixed; bottom: 0; }

            height: 150vh;
            width: 100vw;
            background: green;
<body >
    <div class="empty-div">sssss</div>
    <div class="test-css">test</div>