Question

有问题的网站是1000freewebsites.com。我正在努力解决的具体页面是：

1000freewebsites.com/signup.php
1000freewebsites.com/login.php

该网站使用骨架框架和Ryan Fait的粘性页脚。在这些页面上，我有一个ID为#bluestripe的div，它应该填充页眉和页脚之间的垂直空间。

有三个父元素; #html，＃body和.wrapper。全部设置为高度：100％;在样式表中。 #bluestripe也设置为高度：100％和最小高度：100％。据我了解，这应该达到我想要的效果。我的理论错了吗？

使用Chrome Inspector我发现.wrapper的高度属性已被删除。如果我的理论是正确的，这就解释了为什么#bluestripe没有扩展以填充垂直空间。

我找不到任何超过.wrapper高度设置的元素。你能看到我错过的东西吗？

Answer 1

这是你的css：

.wrapper {
min-height: 100%;
height: auto !important; //height here
margin: 0 auto -40px;
height: 100% ;//height again here
}

你定义了两倍的高度，第一个得到!important它覆盖了第二个

这导致另一个错误，因为填充和其他元素正在推动.container div，所以如果你改变一些属性，你可以摆脱这种行为：

#bluestripe {
background: #0099cc;
width: 100%;
padding: 40px 0px 40px 0px;
border-top: 10px solid #666666;
/*height: 100%; drop this line*/
}

.wrapper {
background: #0099cc; /*add this line*/
min-height: 100%;
margin: 0 auto -40px;
height: auto; /*acording to ryanfaits's css this is what mades the footer stick to the botom*/
}

这将使.bluestripe再次缩小，但由于.wrapper仍具有相同的背景颜色，因此无关紧要

Answer 2

.wrapper的CSS规则有2个高度声明。摆脱一个设置高度为auto。

.wrapper {
    min-height: 100%;
    height: auto !important; /* <- Get rid of this one */
    margin: 0 auto -40px;
    height: 100%;
}

CSS DOM问题 - 找不到属性被覆盖的原因

2 个答案: