当内容较少时，页脚需要坚持到底 [英] Footer needs to stick to bottom when content is less

问题描述

我有一个 aspx 页面，因为我的'页脚'没有贴在底部。 p>

请为此查找html代码

 < div style = ：＃eae8e7; 
 border-top：＃d30000 4px solid; 
 min-height：80px; 
 position：relative; 
 right：0px; 
 bottom：1px ; 
 left：0px; 
 margin-right：auto; 
 margin-left：auto;> 
  

c> css 其中我使用：

  .footer {
 width：100％; 
 padding：0 0; 
 margin：0 auto; 
 background：＃eae8e7; 
 border-top：＃d30000 4px solid; 
 bottom：0px; 
 position：inherit; 
 clear：both; 
} 
  

解决方案

  *，*：before，*：after {-webkit-box-sizing：border-box; -moz-box-sizing：border-box; box-sizing：border-box;} html {height：100％;} body {position：relative; margin：0;填充底部：4rem; min-height：100％; font-family：Helvetica Neue，Arial，sans-serif;} footer {position：absolute; right：0; bottom：0; left：0; padding：1rem; background-color：#efefef; text-align：center;}  

 < footer>页脚始终位于页面底部，但< strong>不固定< / strong>。< / footer>   
 
 
 
尝试将位置更改为固定位置
 
I have an aspx page in which I have less content, due to that my 'footer' is not sticking to bottom.

Please find html code for this
 <div style=" background: #eae8e7;
border-top: #d30000 4px solid;
min-height: 80px;
position: relative;
right: 0px;
bottom: 1px;
left: 0px;
margin-right: auto;
margin-left: auto;"> 


Please find css which i used : 
.footer {
        width: 100%;
        padding: 0 0;
        margin: 0 auto;
        background: #eae8e7;
        border-top: #d30000 4px solid;
        bottom: 0px;
        position: inherit;
        clear: both;
    }

解决方案


*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}

html {
  height: 100%;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 4rem;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
}


footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}

<footer>This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</footer>





Try this change the position as fixed

                        
这篇关于当内容较少时，页脚需要坚持到底的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！