Question

所以，我承认我不擅长CSS，这可能是我的愚蠢，但我希望在我网站的每个页面底部都有一个粘性页脚。

我使用的是绝对位置，这是我的页脚的CSS

    position:absolute;
    bottom:0;
    height:50px;
    padding: 10px;
    width:100%;

当控制台关闭时它可以正常工作，但是如果我打开Chrome开发者工具，则页脚会突然上升，就好像它固定在浏览器窗口上一样，但事实并非如此。

我做错了吗？

其他人如何做粘性页脚？

修改

我创建了一个简单的codepen，其中包含问题的示例

http://codepen.io/anon/pen/yMLBdJ

打开页脚下方的开发工具，您会发现页脚仍然可见，不应该在开发工具后面看不到它吗？这就是问题所在。如果这是一个愚蠢的话，请提前抱歉。

Answer 1

在@media(min-height:768px) and (max-height:850px) { .video-contain{ margin-top:110px; } }的情况下，元素相对于其第一个定位（非静态）祖先元素定位。

如果您想让它贴在窗户上，请使用position: absolute

你可以玩它here

对于你的粘性页脚，你应该参考这个不错的article

Answer 2

因为您知道页脚的高度，所以可以尝试：

    StreamReader reader = new StreamReader(file.InputStream);
    string textLine = reader.ReadLine();
    string key = GetKeyStringFromXaml(textLine);
    string val = GetValStringFromXaml(textLine);
    public string GetKeyStringFromXaml(string textLine) {
        Regex regex = new Regex("<System:String x:Key=\"(.*)\">(.*)</System:String>");
        var v = regex.Match(textLine);
        return v.Groups[1].ToString();
    }
    public string GetValStringFromXaml(string textLine) {
        Regex regex = new Regex("<System:String x:Key=\"(.*)\">(.*)</System:String>");
        var v = regex.Match(textLine);
        return v.Groups[2].ToString();
    }

除非内容超出窗口高度，否则页脚位于底部。如果你想将页脚固定到窗口，只需添加：

html, body {
    height: 100%;
}

// wrapper around all content
main {
    min-height: 100%;
}

main::after {
    content: '';
    display: block;
    height: 70px; // height + padding
}

footer {
    background: grey;
    margin-top: -70px;
    padding: 10px;
    height: 50px;
    width: 100%;
}

CodePen：http://codepen.io/MusikAnimal/pen/OpLeEM

每当我打开Chrome控制台时，页脚就会上升

2 个答案: