爲什麼我的按鈕溢出到另一個頁面？

我試圖建立一個與頁面滾動網站之一。

白色背景表示一頁，灰色背景表示另一頁的開頭。

當我開始用內容填充我的白頁時，我注意到我的按鈕緩慢地開始向下滑動，現在正侵入灰色頁面。我不希望這種情況發生，而是爲了延長白頁。

這裏是我的網頁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

爲什麼我的按鈕溢出到另一個頁面？

回答

相關問題