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

guram dgebuadze
guram dgebuadze
Front End Web Development Techdegree Student 4,121 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
7,150 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; }

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

</html>