html – 当内容较少时,页脚需要坚持到底

参见英文答案 > Footer at bottom of page or content,whichever is lower                                    3个
我有一个aspx页面,其中我的内容较少,因为我的“页脚”并没有坚持到底.

请找到这个的HTML代码

<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;">

请找到我用过的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;
  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>

尝试将此位置更改为固定位置