css 固定到底部

html

<div class="dui-container">
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
</div>

css

.dui-container{
position: relative;
min-height: 100%;
}
main {
padding-bottom: 100px;
}
header, footer{
line-height: 100px;
height: 100px;
}
footer{
width: 100%;
position: absolute;
bottom: 0
}

我的

<style scoped>
  header{
    width: 100%;
    height: 50px;
    background: blue;
    position: fixed;
    top: 0;
  }
  footer{
    width: 100%;
    position: absolute;
    bottom: 0;
    background: #2c3e50;
  }

</style>