放置一个页脚，并将Content定位为绝对

Question

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. 如果我通过移除position:absolute属性来更改图像样式，则一切看起来都很正常。 so my question is how can we place the footer at the bottom with absolute positioned contents? 所以我的问题是如何将页脚放置在内容绝对位于底部的位置？

Answer 1

Updated answer, regarding comment. 更新的答案，关于评论。
As I mentioned at my previous answer, this effect cannot be achieved using pure CSS. 正如我在前面的回答中提到的那样，使用纯CSS不能实现这种效果。 So, I will show the JavaScript approach. 因此，我将展示JavaScript方法。 Add relevant IDs (see Fiddle ), and add the following code at the end of your body. 添加相关的ID（请参阅Fiddle ），并在您的正文末尾添加以下代码。 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). 要修复您的代码，请应用以下CSS（仅显示相关的CSS，并通过描述性注释进行后缀更新）。 Fiddle: http://jsfiddle.net/4ja2V/ 小提琴： 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. 您为.wrapper使用了负的底边距，这导致元素“吃掉”页脚。 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. 当您使用绝对定位的内部元素时，没有可靠的纯CSS方法来获取.wrapper元素的实际宽度/高度。 Hence the appearance of position:fixed . 因此， position:fixed的外观。

The footer is defined to have a height of 4em . 页脚定义为高度为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. 由于页脚位于固定位置（即，元素在向下滚动时不会移动），因此有必要在包装元素的底部添加额外的边距。

Answer 2

给您的页脚定高，然后在您的绝对班级中，

bottom: heightOfYourFooter + 5px;

放置一个页脚，并将Content定位为绝对

问题描述

2 个解决方案

解决方案1
1 已采纳 2011-10-23 11:53:21

解决方案2
0 2011-10-23 11:29:50

放置一个页脚，并将Content定位为绝对

问题描述

2 个解决方案

解决方案1 1 已采纳 2011-10-23 11:53:21

解决方案2 0 2011-10-23 11:29:50

解决方案1
1 已采纳 2011-10-23 11:53:21

解决方案2
0 2011-10-23 11:29:50