css實現讓頁面的footer始終位於底部
阿新 • • 發佈：2019-02-03
在寫html頁面佈局的時候經常會遇到這樣的情況：當頁面內容較少的時候footer下面會有留白這樣會很不好看，直接給footer，fixed定位的話當頁面內容多的時候，footer又會蓋住下面的內容。下面介紹幾種方法讓頁面的footer始終位於底部。
方法一：
<body> <div class="page"> <header> 頭部 </header> <div class="content"> <p class="內容區"></p> </div> <footer> 底部 </footer></div></body>
*{
padding:0;
margin:0
}
html,body{
height: 100%;
}
.page{
box-sizing: border-box;
min-height: 100%;
position: relative;
padding-bottom:100px;
}
header{
height: 60px;
background: #0d6aad;
}
.content{
background: #00c7a6;
}
footer{
width: 100%;
height: 100px;
background: #1ab7ea;
position: absolute;
bottom:0;
left: 0;
}方法二：
其實是對方法一做一些改造，html結構和方法一中的一樣。
*{ padding:0; margin:0 } html,body{ height: 100%; } .page{ min-height: 100%; position: relative; } header{ height: 60px; background: #0d6aad; } .content{ background: #00c7a6; padding-bottom:100px; } footer{ width: 100%; height: 100px; background: #1ab7ea; opacity: 0.6; position: absolute; bottom:0; left: 0; }
方法三：使用flexbox佈局
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}.page{
display: flex;
flex-direction: column;
height: 100%;
}
header{
background: #999;
flex: 0 0 auto;
}
.content{
background: orange;
flex: 1 0 auto;
}
footer{
background: #333;
flex: 0 0 auto;
}