CSS元素顶部（从窗口底部开始）100px

Question

Is it possible to use absolute positioning to place the top of a block-level element 100px from the bottom of the window? 是否可以使用绝对定位将块级元素的顶部放置在距离窗口底部100px的位置？

In my application, I cannot anchor this element a given number of pixels from the top of the page, because several elements on the page have an unknown height, and I would have to use JavaScript to dynamically measure, size, and place these elements. 在我的应用程序中，由于页面上的几个元素的高度未知，因此无法从页面顶部锚定该元素给定数量的像素，并且必须使用JavaScript动态测量，调整大小和放置这些元素。

Thank you for your time. 感谢您的时间。

Answer 1

To position items relative to the browser window you want to use position:fixed , not position:abslute . 要相对于浏览器窗口定位项目，您要使用position:fixed而不是position:abslute 。 Then you just set bottom: 100px or however far you like away from the bottom of the window. 然后，您只需将bottom: 100px设置为bottom: 100px或离窗口底部远的距离即可。

Answer 2

不，在不利用JavaScript或基于所定位元素高度的服务器端逻辑的情况下，不可能使用position:absolute （但是听起来您也不知道）。

Answer 3

I'm not sure about this but maybe this could help: 我对此不确定，但也许可以帮忙：

<div class='b'>
    <div class='a'>
        element
    </div>
</div>

.a {
    margin-bottom:-100%;
}

.b {
    position:absolute;
    bottom:100px;
}

http://jsfiddle.net/pmB9U/ http://jsfiddle.net/pmB9U/

Answer 4

This is quite possible if can live with a scrollbar which does not span the entire page: 如果可以使用不覆盖整个页面的滚动条，则很有可能：

<!DOCTYPE html>
<html>

<head>
<title>Emulate position:fixed</title>
<style type="text/css">
html, body {
    margin: 0;
    padding: 0;
}
body {
    height: 100%;
    overflow: hidden;
}
#content {
    position: absolute;
    top: 50px;
    bottom: 100px;
    width: 100%;
    overflow: auto;
}
#header {
    height: 50px;
    background-color: yellow;
    position: absolute;
    top: 0;
    width: 100%;
    height: 50px;
}
#footer {
    position: absolute;
    background-color: yellow;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
}
</style>
</head>

<body>
<div id="header">
    header
</div>
<div id="content">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
</div>
<div id="footer">
    footer
</div>
</body>

</html>

CSS元素顶部（从窗口底部开始）100px

问题描述

4 个解决方案

解决方案1
1 2013-02-01 23:57:33

解决方案2
1 已采纳 2013-02-02 00:02:25

解决方案3
0 2013-02-02 00:06:17

解决方案4
0 2013-02-02 00:22:18

CSS元素顶部（从窗口底部开始）100px

问题描述

4 个解决方案

解决方案1 1 2013-02-01 23:57:33

解决方案2 1 已采纳 2013-02-02 00:02:25

解决方案3 0 2013-02-02 00:06:17

解决方案4 0 2013-02-02 00:22:18

解决方案1
1 2013-02-01 23:57:33

解决方案2
1 已采纳 2013-02-02 00:02:25

解决方案3
0 2013-02-02 00:06:17

解决方案4
0 2013-02-02 00:22:18