Question

我有一个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;
    }

Answer 1

*,
*: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>

尝试将此位置更改为固定

Answer 2

.footer {
    position:absolute;
    left:0;
    bottom:0;
    height:17px;
    width:100%;
    background-color:black;
}

只要html为position:relative，就可以了。不需要包装或类似的东西：）

Answer 3

<!doctype html>
<html lang="en">
<head>
    <style>
        html,body{
            height: 100%;
            margin: 0px;
        }
        #container{
            min-height: 90%;
            background-color: #f00;
        }
        #footer{
            min-height: 10%;
            background-color: #00f;
        }
    </style>
</head>
<body>
    <div id="container">
        it's the container
    </div>
    <div id="footer">
        it's the footer
    </div>
</body>
</html>

当内容较少时，页脚需要坚持到底部

3 个答案: