Setting marginBottom via Javascript does not work as expected

Question

i try to set a margin bottom to the body element, but it wont work as expected...

document.addEventListener('DOMContentLoaded', (event) => {
    if(window.outerWidth > 768) {
        let footerHeight = document.querySelector('footer').offsetHeight;
        document.querySelector('body').style.marginBottom = footerHeight + "px";
    }
    /* .... */
});

its just doing nothing. the weird part i dont understand: it works as expected when i try to set it as a paddingBottom, but when i change it to margin...

my current solution for now is to wrap it in a setTimeout() like:

document.addEventListener('DOMContentLoaded', (event) => {
    if(window.outerWidth > 768) {
        setTimeout(function(){
            let footerHeight = document.querySelector('footer').offsetHeight;
            document.querySelector('body').style.marginBottom = footerHeight + "px";
        }, 1);
    }
    /* .... */
});

let footerHeight gets the correct value in any cases. no other scripts are loaded which i can think of could affect this...

The simplified CSS & HTML:

body {
    margin: 0;
    padding-top: 48px;
}

.content-wrapper {
    background: #fff;
    padding-bottom: 40px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.08), 0 4px 4px rgba(0, 0, 0, 0.16);
}

footer {
    position: fixed;
    bottom: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    display: flex;
    width: 100%;
}

<!DOCTYPE html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body class="start">
...
<div class="content-wrapper">
    ...
</div>

<footer style="background-image: url('/images/polygon.jpg');">
    <div class="container">
        <div class="row">
            ...
        </div>
    </div>
</footer>

<script src="/js/script.js"></script>

</body>
</html>

creates this type of footer reveal effect: https://codepen.io/hkdc/pen/BLJAVL but to make sure that the whole footer is always visible i add a margin-bottom of the footers height to the body element.

Anyone has an idea what is happening here or am i getting wrong and can explain it?

i removed css rule that gives body margin bottom and copied your first javascript to code pen and get the same result. — Eldar, Nov 13 '19 at 12:23
Any reason you are not using the CSS rule `@media screen (max-width: 762 ) { ... }` for this? Also keep in mind that you can use `view height, vh` as a relative unit in your CSS if stuff needs to be a percentage of the available view width or height. For this specific case, I would probably go for a CSS grid layout with 80vh and 20vh or something as the rows. — Shilly, Nov 13 '19 at 12:27

score 0 · Answer 1 · answered Nov 13 '19 at 11:32

I'm not sure you understand body tag correctly. You footer is in that body too adding margin to body cant have any effect in this case cause there is no element (at least visible) after body. Padding works cause padding is for the elements inside the body. If you want to add margin before your footer you can use previousSibling property and set its margin.

Setting marginBottom via Javascript does not work as expected

1 Answers1