当内容较少时，页脚需要粘在底部[重复]答案

【问题标题】：Footer needs to stick to bottom when content is less [duplicate]当内容较少时，页脚需要粘在底部[重复]
【发布时间】：2015-03-15 03:12:53
【问题描述】：

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

【问题讨论】：

如果您只想使用 CSS 而不使用 position:fixed，那么这就是您需要的 ryanfait.com/sticky-footer
@wf4：不是这样的，你可以提出任何方法来实现它
将min-height设置为容器
请你建议我如何定义
如果我的回答不是你想要的就告诉我

标签： html css

【解决方案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;
}

&lt;footer&gt;This footer will always be positioned at the bottom of the page, but &lt;strong&gt;not fixed&lt;/strong&gt;.&lt;/footer&gt;

试试这个把位置改成固定的

【讨论】：

这很好，但我不希望它作为固定位置。
为什么不使用bootstrap之类的框架
我已经编辑了我的代码，现在试试
在 iphone 10 的 safari 中对我不起作用。*

【解决方案2】：

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

只要 html 是 position:relative，就可以。不需要包装器或类似的东西:)

【讨论】：

使用此代码后，我得到这个问题，请找到截图的url：imagesup.net/?di=014214164269
你的html {position:relative;}是吗？
不，我没有主 div 的位置，您给定的代码不起作用
我可以看看您的 HTML 和 CSS 的总体布局吗？这应该基于它总是对我有用的事实。您的 HTML 元素本身需要是 position:relative
其实我在使用aspx和用户控件的网页，我的页脚被添加到用户控件中

【解决方案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>

【讨论】：