Javascript 没有内容时如何在底部设置页脚_Javascript_Jquery_Html_Css

Javascript 没有内容时如何在底部设置页脚

javascript jquery html css

Javascript 没有内容时如何在底部设置页脚,javascript,jquery,html,css,Javascript,Jquery,Html,Css,设计人 A）页脚已修复： footer { background-color: skyblue; position:fixed; bottom: 0; width: 100%; } 页脚{ 背景色：天蓝色；位置：固定；底部：0；宽度：100%； } 设计人只需将其添加到css中。您有三个选项，我建议您使用flex box 1.位置：固定 2.柔性箱 HTML 演示： 3.桌子 HTML 演示：您需要位置：固定


设计人

A）页脚已修复：

footer {
    background-color: skyblue;
    position:fixed;
    bottom: 0;
    width: 100%;
}

页脚{
背景色：天蓝色；
位置：固定；
底部：0；
宽度：100%；
}


设计人

只需将其添加到css中。

您有三个选项，我建议您使用flex box

1.位置：固定 2.柔性箱 HTML

演示：

3.桌子 HTML

演示：

您需要位置：固定吗？

footer {
  position: fixed;
  bottom: 0;
}

footer {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
}

<html>
    <body>
        <main></main>
        <footer></footer>
    </body>
</html>

html {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex-grow: 1;
}

<html>
    <body>
        <main></main>
        <footer></footer>
    </body>
</html>

html {
    height: 100%;
}

body {
    display: table;
    min-height: 100vh;
}

main: {
    height: 100%;
}

footer {
    display: table-row;
    height: 1px;
}