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

我试图建立一个与页面滚动网站之一。

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

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

这里是我的网页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属性，这里是结果。它所做的只是将按钮靠近我的内容，但仍然侵犯了页面边界。

来源

2015-12-30 noblerare

你能提供生活的例子吗？ –

你能显示html吗？可能是该按钮位于具有“position：absolute”的div内;' –

尝试从.download-center css – Nir

我回答我自己的职位，因为除去边距不是为我工作的解决方案。相反，它正在增加利润率底部。

margin-bottom: 40px;

来源

2016-01-07 03:46:29 noblerare

的原因是你已经限制height和使用margin-top：

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

调整margin-top到较小值，说30px将使按钮留在里面。

来源

2015-12-30 09:23:33

我试着去除'margin-top'属性，这似乎不起作用。我编辑了我原来的帖子以反映这一点。 – noblerare

从顶端减少保证金，并添加像位置：

.download-center { 
    text-align: center; 
    margin-top: 40px; 
    position: absulote;  
}

来源

2015-12-30 19:44:30 devpro

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

回答

相关问题