带渐变的 CSS 页脚 - 不粘

发布于 2024-10-09 08:36:24 字数 1457 浏览 3 评论 0原文

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

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

<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 来自仅做与 CSS 粘性页脚相反的操作我希望红色继续向下到窗口底部带有渐变为黑色的渐变。

谢谢！

原文

What my designer wants and what I'm trying to code is a footer that begins at the bottom of dynamic content (actually, they want the footer to start beneath the content area up about 20px - but that's something else). The thing is, they have a gradient that they want down there that expands as the browser window does.

Due to the gradient I can't just cheat and declare the window color as black and if I set the size of the footer to the height of the gradient, I end up with the scroll bar. I feel I must be missing something incredibly obvious, but I've been staring at it so long I just am seeing cross-eyed.

<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;
}

Kind of like http://roughtech.com/t/oppsticky.html from Doing the opposite of CSS Sticky Footer only I want the red to continue down to the bottom of a window with a gradient that fades to black.

Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

谁的年少不轻狂 2024-10-16 08:36:24

删除了我的最后一个答案 - 它也不起作用。在符合标准的模式中，唯一不能滚动到的内容是隐藏的父级内的内容。除了错误之外，它不会显示。我看到的是一个 IE 错误。

抱歉，目前 CSS 无法做到这一点。

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

回复收藏 0 原文

~没有更多了~