0

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

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

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

有三个父元素；#html、#body 和 .wrapper。全部设置为 height:100%；在样式表中。#bluestripe 也设置为 height:100% 和 min-height:100%。据我了解，这应该可以达到我想要的效果。我的理论错了吗？

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

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

4

2 回答 2

0

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

.wrapper {
    min-height: 100%;
    height: auto !important; /* <- Get rid of this one */
    margin: 0 auto -40px;
    height: 100%;
}
于 2013-05-20T03:54:39.940 回答
0

这是你的CSS：

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

你定义了两倍的高度，因为第一个!important覆盖了第二个

这会导致另一个错误，因为填充和其他元素将.containerdiv 向下推，所以如果您更改一些属性，您可以摆脱这种行为：

#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 仍然具有相同的背景颜色，这并不重要

于 2013-05-20T03:53:34.703 回答