Question

我正在尝试创建与本网站上显示的效果相同的效果：

http://www.mintdigital.com

如何让div从屏幕底部开始？

Answer 1

在这种情况下，它是parallax效果，背景可以在position:fixed，而您的内容在position:absolute top:90%

jsFiddle here

<强> HTML

<body>
    <div id="content">
    </div>
</body>

<强> CSS

#content{
    position:absolute;
    top:90%;
    width:100%;
    height:800px;
}

Answer 2

以下是一个例子：

<div id="container">
    <p>put your stuff in here</p>
</div>

这是css：

#container{
    width:100%;
    min-height: 200px;
    position: absolute;
    top:95%
}

这应该可以解决问题。

编辑：或者采用不同的方式来做，因为MLeFevre说是在它上面创建一个div，这是一个例子：

<div id="empty_space"></div>
<div id="container">
    <p>put your stuff in here</p>
</div>

用这个css：

#empty_space{
    width:100%;
    height: 90%;
}
#container{
    width:100%;
}

Answer 3

我正在尝试创建与本网站上显示的效果相同的效果：

http://www.mintdigital.com

如何让div从屏幕底部开始？

您的问题与您的链接不符。如果你想在滚动时放置应该与DIV重叠的背景，你应该这样做：

HTML

<body>
    <div class="bkg"></div>
    <div class="content></div>
</body>

CSS

.bkg {
    position: fixed;
    left: 0;
    top: 0;
    background: url('/static/img/link_arrow.png');
    overflow: hidden;
}
.content {
    background: white /* or anything you like */
    margin-top: 90%
}

如果您想要满足您的问题，只需在屏幕底部修改底部工具栏或其他内容，您应该这样做：

HTML

<body>
    <div class="foot-fixed"></div>
    <!-- rest content here -->
</body>

CSS

.foot-fixed {
    position: fixed;
    left: 0;
    top: 100%;
    width: 100%
    overflow: hidden;
    margin: -50px;
    height: 50px;
    z-index: 100;
}

无论如何，如果您有工作示例，如果您在任何其他流行的浏览器中使用Firefox或内置工具，您始终可以使用FireBug对其进行反向工程。

如何让div从页面底部开始

3 个答案: