Question

我有一个包装类，其中包含网页上的所有内容。问题是如果内容是绝对放置的，它会吃掉我的页脚。我必须把内容放在绝对的位置。

似乎页脚不能识别内容是绝对的。继承我的代码

<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属性来更改图像样式，则一切看起来都很正常。所以我的问题是我们如何将页脚放在底部，内容绝对定位？

Answer 1

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

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

<小时/> 上一个回答：
问题是由于绝对定位的元素不会影响其父级的高度/宽度这一事实。

要修复您的代码，请应用以下CSS（仅显示相关的CSS，更新后缀为描述性注释）。 小提琴：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。因为页脚位于固定位置（即，向下滚动时元素不会移动），所以必须在包装元素的底部应用额外的边距。

Answer 2

给你的页脚一个固定的高度，然后在你的绝对课堂上，做

bottom: heightOfYourFooter + 5px;

放置一个内容定位为绝对的页脚

2 个答案: