Question

我的设计师想要的以及我想要编写的内容是一个从动态内容底部开始的页脚（实际上，他们希望页脚在内容区域下方开始大约20px - 但这是其他的东西）。问题是，他们有一个他们想要的渐变，随着浏览器窗口的扩展而扩展。

由于渐变，我不能仅仅作弊并将窗口颜色声明为黑色，如果我将页脚的大小设置为渐变的高度，我最终会使用滚动条。我觉得我一定会错过一些非常明显的东西，但是我一直盯着它看，我只是看到了眼睛。

<body>
    <div id = "page">
        <div id = "header">
        </div>
        <div id = "content">
            I am ze content area (for now)
        </div>
    </div>
    <div id = "footer">
        I AM THA FOOTAH<br/> So much cooler than the header these days
    </div>
</body>

body
{
    background-color: grey;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 0px;
}

div
{
    display: block;
}

#page
{
    background-color: white;
    margin: 0px auto;
    padding: 0px;
}

#header
{
    background: url("http://kjunek.com/images/header_background.png") repeat-x;
    color: yellow;
    height: 240px;
}

#content
{
    background-color: white;
}

#footer
{
    background: #030a19 url("http://kjunek.com/images/footer_background.png") repeat-x 50% 0%;
    height: 626px;
    overflow: hidden;
    color: white;
}

有点像来自http://roughtech.com/t/oppsticky.html的Doing the opposite of CSS Sticky Footer，我希望红色继续向下延伸到窗口的底部，渐变渐变为黑色。

谢谢！

Answer 1

删除了我的最后一个答案 - 它也不起作用。在符合标准的模式中，唯一无法滚动到的内容是隐藏在父级内的内容。除了bug之外，它没有显示出来。我所看到的是IE漏洞。

抱歉，今天的CSS无法做到。

如果今天需要进行计算，则需要使用jquery来获取元素的高度，然后计算页脚所需的高度;并且，使用CSS渐变http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/，这样你就可以从你的海军阴影到你的黑色阴影。我会劝阻这种方法，因为当你开始考虑所有可能的分辨率情况时，计算会变得相当复杂，我认为他们可能需要根据不同的分辨率重新设计高度。

CSS页脚W /渐变 - 不粘

1 个答案: