将页脚的内容定位为绝对位置

发布于 2024-12-11 13:47:08 字数 782 浏览 0 评论 0原文

我有一个包装类，其中包含网页上的所有内容。问题是，如果内容绝对放置，它会占用我的页脚。我必须将内容放置为绝对定位。

页脚似乎无法识别内容的绝对性。这是我的代码

<style>

* {
    margin: 0;
    }
    html, body {
    height: 100%;
    }
    .wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
    }
    .footer, .push {

    height: 4em;
    }
 </style>
 </head>

<body>
<div class="wrapper">
<img src="activity/Chrysanthemum.jpg" style="z-index: 1; position:absolute; width: 420px; height: 400px; left: 100px;top:260px; ">
<div class="push">
</div>
</div>
<div class="footer" >copyrights</div>
</body>

如果我通过删除 position:absolute 属性来更改图像样式，一切看起来都正常。所以我的问题是我们如何将页脚放置在具有绝对定位内容的底部？

原文

I have a wrapper class that contains all the content on the web page. the problem is if the content is absolutely placed, it eats my footer. I have to place the content as absolute positioned.

It seems like the footer doesnot recognize that the content is absolute. Heres my code

<style>

* {
    margin: 0;
    }
    html, body {
    height: 100%;
    }
    .wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
    }
    .footer, .push {

    height: 4em;
    }
 </style>
 </head>

<body>
<div class="wrapper">
<img src="activity/Chrysanthemum.jpg" style="z-index: 1; position:absolute; width: 420px; height: 400px; left: 100px;top:260px; ">
<div class="push">
</div>
</div>
<div class="footer" >copyrights</div>
</body>

If I change the image style by removing the position:absolute property , everything looks normal. so my question is how can we place the footer at the bottom with absolute positioned contents?

分享到QQ

分享到微博

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

发布评论

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

物价感观 2024-12-18 13:47:08

关于评论更新了答案。
正如我在之前的回答中提到的，使用纯 CSS 无法实现这种效果。因此，我将展示 JavaScript 方法。添加相关ID（参见Fiddle），并在你身体的末端。此代码片段将在必要时调整包装器的大小。
注意：当页面小于窗口高度时，页面包装器仍将采用完整高度，因为无法通过绝对定位的元素来区分高度更改。

<script>
(function(){
    var wrapper = document.getElementById("wrapper");
    var height = document.documentElement.scrollHeight;
    wrapper.style.height = height + "px";
})();
</script>

Previous answer:
The issue is caused by the fact that absolutely-positioned elements do not affect the height/width of their parent.

要修复您的代码，请应用以下 CSS（仅显示相关 CSS，并通过描述性注释进行更新）。 Fiddle：http://jsfiddle.net/4ja2V/

html, body {
    height: 100%;
    width: 100%;
    padding: 0; /* Get rid off the padding */
}
.wrapper {
    position: relative; /* Necessary to properly deal with absolutely positioned
                           child elements. */
    height: 100%;
    margin: 0 auto 4em; /* So that the content is visible when scrolled down*/
}
.footer {
    height: 4em;
    position: fixed; /* Positions your footer at a fixed position in the window*/
    bottom: 0; /* At the bottom of the window*/
}

您使用了否定.wrapper 的底边距，导致元素“吃掉”页脚。当您使用绝对定位的内部元素时，没有可靠的纯 CSS 方法来获取 .wrapper 元素的真实宽度/高度。因此出现了position:fixed。

页脚的高度定义为 4em。由于页脚位于固定位置（即向下滚动时元素不会移动），因此有必要在包装元素的底部应用额外的边距。

Updated answer, regarding comment.
As I mentioned at my previous answer, this effect cannot be achieved using pure CSS. So, I will show the JavaScript approach. Add relevant IDs (see Fiddle), and add the following code at the end of your body. This code snippet will resize your wrapper when necessary.
Note: When the page is smaller than the window's height, the page wrapper will still take the full height, because it's not possible to distinguish a height change by an absolutely positioned element.

<script>
(function(){
    var wrapper = document.getElementById("wrapper");
    var height = document.documentElement.scrollHeight;
    wrapper.style.height = height + "px";
})();
</script>

Previous answer:
The issue is caused by the fact that absolutely-positioned elements do not affect the height/width of their parent.

To fix your code, apply the following CSS (only showing relevant CSS, updated postfixed by descriptive comments). Fiddle: http://jsfiddle.net/4ja2V/

html, body {
    height: 100%;
    width: 100%;
    padding: 0; /* Get rid off the padding */
}
.wrapper {
    position: relative; /* Necessary to properly deal with absolutely positioned
                           child elements. */
    height: 100%;
    margin: 0 auto 4em; /* So that the content is visible when scrolled down*/
}
.footer {
    height: 4em;
    position: fixed; /* Positions your footer at a fixed position in the window*/
    bottom: 0; /* At the bottom of the window*/
}

You were using a negative bottom-margin for .wrapper, which caused the element to "eat" the footer. When you're using absolutely poisitioned inner elements, there's no reliable pure-CSS method to get the real width/height of the .wrapper element. Hence the appearance of position:fixed.

The footer is defined to have a height of 4em. Because the footer is positioned at a fixed position (ie, the element won't move when scrolling down), it's necessary to apply an additional margin at the bottom of the wrapper element.

回复收藏 0 原文