为什么我的按钮溢出到另一页？

Question

以下是正在发生的事情的图片示例。

我正在尝试构建其中一个单页滚动网站。

白色背景表示一页，灰色背景表示另一页的开头。

当我开始用内容填充我的白页时，我注意到我的按钮慢慢开始向下滑动，现在正在侵入灰色页面。我不希望这种情况发生，而是希望白页扩展。

以下是我的CSS页面：

#white-page
{
    background-color: white;
    height: auto;
    min-height: 100vh;
    text-align: center;
}

#grey-page
{
    background-color: grey;
    min-height: 100vh;
}

这是我的按钮CSS。

.download-center
{
    text-align: center;
    margin-top: 60px;   
}

.btn 
{
    text-decoration: none;
    border: 1px solid gray;
    padding: 10px 20px 10px 20px;
    border-radius: 25px;
    color: inherit;
}

以下是相关的HTML

<section id="white-page">
    //page content here
    <div class="download-center">
        <a class="btn font-r" href="docs/resume.pdf" target="_blank">
        <img id="download-pic" src="pic/download.svg" />Download R&eacutesum&eacute
        </a>
    </div>
</section>

<section id="grey-page">
    //page content here
</section>

我尝试将白色页面的高度设置为auto，但它似乎无法正常工作。

基本上，我只是希望页面按照内容要求进行扩展，但最小值为vh，以便首先占用整个屏幕。

编辑：删除margin-top属性，结果如下。所有这一切都会使按钮更接近我的内容，但仍会侵占页面边框。

Answer 1

原因是您已限制height并使用了margin-top：

.download-center {
    text-align: center;
    margin-top: 60px;   
}

将margin-top调整为较小的值，例如30px会使按钮保持在内部。

Answer 2

从顶部减少保证金并添加位置如下：

$url="https://weather.yahoo.com/"
$proxy = [System.Net.WebRequest]::GetSystemWebProxy()
$proxy.Credentials = [System.Net.CredentialCache]::DefaultCredentials
$wc = new-object system.net.webclient
$wc.proxy = $proxy
$wc.downloadString($url)

Answer 3

我回答了自己的帖子，因为删除margin-top并不是对我有用的解决方案。相反，它正在增加利润率底部。

margin-bottom: 40px;