CSS页脚定位溢出问题

发布于 2024-10-31 01:22:40 字数 1034 浏览 1 评论 0原文

我的页脚有问题，我确信我错过了一些应该非常明显的东西，但我已经使用它太久了并且没有取得任何进展。

我的问题是内容部分位于页脚下方而不是向下推。

这是两个重叠的对象。

#footer {
    margin: -40px auto 0;
    z-index: 9999;
    border-bottom: none;
    width: 75em;
    height: 3.333em;
    border: .0833em solid #DEDEDE;
    -moz-border-radius-topleft:26px;
    -moz-border-radius-topright:26px;
    -webkit-border-top-left-radius:26px;
    -webkit-border-top-right-radius:26px;
    -moz-box-shadow:0px 0px 20px #000000;
    -webkit-box-shadow:0px 0px 20px #000000;
    box-shadow:0px 0px 20px #000000;
}

#middle {
    width:75em;
    z-index: -1;
    margin:0em auto;
    padding: 15px 0 1.667em 0;
    height: 95%;
    position: relative;
    background-color: rgba(255, 255, 255, .30);
    -moz-border-radius:26px;
    -webkit-border-radius:26px;
    border-radius:26px;
    -moz-box-shadow:0px 0px 20px #000000;
    -webkit-box-shadow:0px 0px 20px #000000;
    box-shadow:0px 0px 20px #000000;
}

原文

I am having an issue with my footer, I am sure I'm missing something that should be painfully obvious but I've been playing with it for too long and am making no progress.

My issue is that the content section goes underneath my footer instead of pushing it down.

Replicated issue

And here are the two objects that are overlapping.

#footer {
    margin: -40px auto 0;
    z-index: 9999;
    border-bottom: none;
    width: 75em;
    height: 3.333em;
    border: .0833em solid #DEDEDE;
    -moz-border-radius-topleft:26px;
    -moz-border-radius-topright:26px;
    -webkit-border-top-left-radius:26px;
    -webkit-border-top-right-radius:26px;
    -moz-box-shadow:0px 0px 20px #000000;
    -webkit-box-shadow:0px 0px 20px #000000;
    box-shadow:0px 0px 20px #000000;
}

#middle {
    width:75em;
    z-index: -1;
    margin:0em auto;
    padding: 15px 0 1.667em 0;
    height: 95%;
    position: relative;
    background-color: rgba(255, 255, 255, .30);
    -moz-border-radius:26px;
    -webkit-border-radius:26px;
    border-radius:26px;
    -moz-box-shadow:0px 0px 20px #000000;
    -webkit-box-shadow:0px 0px 20px #000000;
    box-shadow:0px 0px 20px #000000;
}

分享到QQ

分享到微博

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

发布评论

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

甩你一脸翔 2024-11-07 01:22:40

如果我理解您想要正确执行的操作，那么您正在尝试防止页脚与“中间”元素重叠。

看一下：

margin: -40px auto 0;

如果将其更改为

margin: 40px auto 0;

删除减号，则会将页脚向南移动。您可以调整确切的长度，但我相信这是主要问题，并且经过测试可以将页脚向下移动。

If I understand what you're trying to do properly, you are trying to keep the footer from overlapping the "middle" element.

Take a look at:

margin: -40px auto 0;

If you change this to

margin: 40px auto 0;

Removing the minus sign moves your footer south. You can adjust the exact length, but I believe this was the primary issue, and it tested to work to move the footer down.

回复收藏 0 原文

~没有更多了~