我正在尝试制作一个与另一个网站相似的网站。在他们的网站上，他们使用 JavaScript 更改第一部分的填充以将其保留在 Windows 视口(viewport)中。我已经这样做了，但是现在我遇到了一个问题，就是当窗口大小改变时，让按钮按照按钮的移动方式移动。
请看下面的视频，基本上当我减小高度(在一定程度上)时按钮应该向上移动，但在我的副本上它没有，因为我不知道他们是怎么做到的。下面的视频显示了他们的 CSS 代码和 HTML，JavaScript 似乎没有改变任何值来使按钮移动，但确实如此，元素的填充从 96 开始没有改变。
编辑: 到目前为止我的代码，html:
<body>
<div class="container">
<section id="header" class="arrows" style="padding:280px 0px">
<header>
<h1>Mobile Paint Solutions</h1>
<p>Since 1980</p>
</header>
<footer>
<a onClick="test()" href="" class="button white">About</a>
</footer>
</section>
<section id="banner" class="arrows">
<header>
<div>
<h1>About Us</h1>
<p>We are a proud company and have been providing a superb service for many years. You may read some of our reviews or sumbmit your own below! </p>
</div>
</header>
<footer>
<a href="#banner" class="button white">About</a>
</footer>
</section>
</div>
</body>
#header 的 CSS:
body {
text-align:center;
font-family:'Source Sans Pro', sans-serif;
letter-spacing: 1px;
background-image:url(images/bg.jpg);
padding:0px;
margin:0px;
}
header { margin-bottom: 1em; }
* {
margin:0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
*:before, *:after {
box-sizing: border-box;
}
/* Header and Title Styles */
#header {
display:inline-block;
text-transform:uppercase;
color:#FFF;
cursor:default;
text-align: center;
}
#header header p:before {
content: '';
display: block;
border-top: solid 1px rgba(255, 255, 255, 0.5);
margin: 4px 0 0.8em 0;
}
#header header p {
border-top:solid 1px rgba(255, 255, 255, 0.5);
letter-spacing:3px;
text-transform:uppercase;
font-size:1em;
margin-top:1em;
}
#header h1 {
font-size:2.5em;
font-weight:bold;
letter-spacing:3px;
}
这是一个link到他们的网站，这样你就可以看到它的工作。
最佳答案
解决了这个问题，似乎页脚需要绝对定位，改变了一些其他代码，例如相对定位页眉，然后它似乎开始工作了。
关于javascript - CSS/JavaScript : Liquid Design issue，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32036746/