Question

我正试图理解https://www.google.com/中的技巧。

底栏有position: absolute; bottom: 0;但是如果你最小化窗口的高度，它会在徽标/输入下保持（“堆叠”）。

当然这对js来说是可行的，但它是纯CSS吗？我的问题是有没有可以创建这种“堆叠效应”的CSS技巧，如果是这样，怎么办呢？

我试图理解<span>Google Logo</span> <div>Bottom bar</div>是否能解决这个问题，但我猜不是。

Answer 1

这是因为他们将padding-bottom值设置为等于页脚的高度以取代它。

.content {
    padding-bottom: 35px;
}

请参阅.. padding-bottom:35px = height:35px

#footer {
    bottom: 0;
    font-size: 10pt;
    height: 35px;
    position: absolute;
    width: 100%;
}

Answer 2

干净的方法是在身体上设置一个等于页脚高度的下边距。

这是你的css：

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

HTML：

<html>
<head>
    <title></title>
</head>
<body>
    <nav></nav>
    <article>Lorem ipsum...</article>
    <footer></footer>
</body>
</html>

以下是此方法的示例：http://mystrd.at/data/sticky_footer.html

固定最小高度的底杆

2 个答案: