0

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

http://www.mintdigital.com

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

4

3 回答 3

0

在这种情况下，它是一个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;
}
于 2013-10-16T09:37:31.423 回答
0

这是一个例子：

<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%;
}
于 2013-10-16T09:37:50.763 回答
0

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

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 对其进行逆向工程。

于 2013-10-16T11:00:35.597 回答