Html 无法推动底部的页脚_Html_Css

Html 无法推动底部的页脚

html css

Html 无法推动底部的页脚,html,css,Html,Css,我试图将我的页脚页面推到底部，但在我的布局中，它位于顶部这是我的密码样本结构 <body>  <footer> <div id="main-footer"> <div class="col-md-8 col-md-offset-2"> <h1>hello world</h1> </div>

我试图将我的页脚页面推到底部，但在我的布局中，它位于顶部

这是我的密码

样本结构

<body>
<!-- some codes here -->
<footer>
    <div id="main-footer">
        <div class="col-md-8 col-md-offset-2">
            <h1>hello world</h1>
        </div>
    </div>
</footer>
</body>

---更新的css---

如果我将高度设置为100%，我会尝试检查整个身体是否会占据，但以下是输出：

正如你所看到的，它并没有占据我的整个页面

请在你的代码中使用下面的css，也许它对你有用

html {
    min-height:100%;
    position:relative;
    height:auto;
}

body {
    padding-bottom:500px;
}

footer {
    position: absolute;
    bottom: 0; /** no effect **/
    min-height:500px;
    background: #000;
    width: 100%;
    z-index: 4;
}

请使用下面的css为您的代码，可能是它将为您工作

html {
    min-height:100%;
    position:relative;
    height:auto;
}

body {
    padding-bottom:500px;
}

footer {
    position: absolute;
    bottom: 0; /** no effect **/
    min-height:500px;
    background: #000;
    width: 100%;
    z-index: 4;
}

正确关闭css主体大括号。还可以参考其他网站，学习如何编写/编码CSS。现在，考虑下面的内容：

不要使用绝对值。相反，使用相对位置。相对位置用于相对于内容的正常位置放置内容。用于将内容放置到最近的祖先位置的绝对位置。有三种类型的位置：固定、相对、绝对和静态

body {
    font-family: Helvetica, '游ゴシック', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, sans-serif;
    font-weight: 300;
    position: relative;
}
footer {
    position: relative;
    bottom: 0; /** no effect **/
    min-height: 500px;
    background: #000;
    width: 100%;
    z-index: 4;
    /** top: 0; -- if enabled my footer goes on the top **/
}

正确关闭css主体大括号。还可以参考其他网站，学习如何编写/编码CSS。现在，考虑下面的内容：

body {
    font-family: Helvetica, '游ゴシック', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, sans-serif;
    font-weight: 300;
    position: relative;
}
footer {
    position: relative;
    bottom: 0; /** no effect **/
    min-height: 500px;
    background: #000;
    width: 100%;
    z-index: 4;
    /** top: 0; -- if enabled my footer goes on the top **/
}

footer

的

css

是否真的位于

正文

中？标记是否未正确关闭。。并尝试粘性页脚，而不是使用psotion:bolute；底部：0px；你应该更喜欢用粘脚。下面是使用示例结构和css实现此目的的五种不同方法，页脚位于底部。可能是某些元素样式导致了问题是

页脚的css
确实在正文
中？标记未正确关闭。。并尝试粘性页脚，而不是使用psotion:bolute；底部：0px；你应该更喜欢用粘脚。下面是使用示例结构和css实现此目的的五种不同方法，页脚位于底部。可能是某些元素样式导致了问题OK，当我检查100%的html时，它不会占据我页面的整个高度：（@Jerielle请使用minheight
而不是htmland中的height添加position:relative；
到html alsook，当我检查100%的html时，它不会占据我页面的整个高度：（@Jerielle请使用minheight
代替htmland中的height添加位置：relative；
到html