如何将Web内容保留在用户视图下方？

Question

这是一个奇怪的问题但是，有没有办法在页面视图下面保留一块内容，无论页面大小是多少？

我已经看到了视差滚动类似的地方，但它的代码比我需要的多。我不打算有任何前景/背景滚动效果。

只需要一个将显示的标题页和一个号召性用语按钮，该按钮将向下滚动到内容，而不会有任何不必要的边距/填充量，这会使流动设备上的流量出现偏差。

几乎正在使用的产品http://www.keisha.in/testing

的示例

/*Section 1 */
#portfolio {
    margin-top: 100%;
    position: absolute;
}

/*Section 2 */
#resume {
    margin-top: 200%;
    position: absolute;
}

<div id="title"> Title Page  <a href="#portfolio">Work</a> </div>


<div id="portfolio"> Stuff </div>

<div id="resume"> Other Stuff </div>

Answer 1

我不太清楚我理解你的问题，但这可能是你所寻找的一个粗略变体 - DEMO

<强> HTML：

<div class="main-content">
    <a href="#bottom_content">Read theText...</a>
</div>

<div class="bottom-content" id="bottom_content">
    blah...blah...blah...blah...blah...
    blah...blah...blah...blah...blah...
</div>

<强> CSS：

.main-content,
.bottom-content {
    position: absolute;
    width: 100%;
    height: 100%;
}
.main-content {
    background: red;
}
.bottom-content {
    margin-top: 100%;
    background: blue;
}

如需其他帮助 - 请与我们分享您的示例代码。

Answer 2

我相信（根据您提供的信息），您需要为底部内容div提供以下css样式

#bottom-content{
  position:fixed;
  height:100px; /*just for an example*/
  width:100%; /* your image looked like it needed 100% */
  bottom:-105px; /*-(heightOfElement) and extra five pixels, just to be safe */
}

同时我输入这个答案，@ Danko说道。感谢@Danko ..

猜猜它有帮助。

@NoSense指出，在这种情况下，我宁愿请你

display : none; 

最初然后

display: block; 

使用javascript / jquery onClick