Home>

I use wordpress lightning, but if there is little content on the page, a margin will open under the footer.

I want to always keep the footer at the bottom of the page.

When I looked into the html
<body>
<div class ="wrapper">

Content

<div class ="push"></div>
</div>
<footer class ="footer">Footer</footer>
</body>

Css
html, body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;

/* Negative margin equal to footer height */
/ * Also serves as a potential margin for the last child element */
margin-bottom: -50px;
}
.footer,
.push {
height: 50px;
}

There was

. I tried it but there is no change.
Is html part correct in description in header.php?

  • Answer # 1

    If the content is always fixed regardless of whether it is long or short, it can be fixed for the time being by writing the following in Appearance-Customization-Additional CSS.

    div.siteContent {
        margin-bottom: 200px;/* Adjust according to your site. Margin of the part hidden by the footer * /
    }
    footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
    }

    If a widget or the like is registered, the corresponding height is required, so the height of the main area decreases, but that is not taken into account.
    If the footer height changes depending on the screen width, add a media query accordingly.

  • Answer # 2

    <body>
      <header></header>
      <div id = main></div>
      <footer></footer>
    </body>
    header {
      height: 50px;
      background: skyblue;
    }
    footer {
      height: 60px;
      background: palegreen;
    }
    #main {
      min-height: calc (100vh-(50px + 60px));/* points * /
    }
      

    Is the html part correct in header.php?

    ... It's not really different to write everything in the header part

    Write each element where it should be written


    [CSS] Summary of how to use "calc () function" that is useful to know -Layout, element arrangement, font size definition, etc.