確保div距頁面底部的距離

我有<div>（例如註冊以獲取通知）。我希望將div的頂部與瀏覽器底部保持一定的距離（不管大小的大小）。目標是人們會看到div的頂部，並想向下滾動查看div的其餘部分。我試過這個，但當我改變瀏覽器的大小時，div的頂部消失了。我的CSS：確保div距頁面底部的距離

.divider 
{display:block; 
position: absolute; 
top: 700px; 
width: 100%; 
text-align: center; 
padding:10px 
}

感謝您的幫助！

來源

2015-08-16 H C

使用margin-bottom屬性，以保證距離，即：

.divider 
{ 
display:block; 
position: absolute; 
top: 700px; 
width: 100%; 
text-align: center; 
padding:10px; 
margin-bottom:20px; 
/*change this^to the distance you want from the bottom of the page*/ 
}

或者改變的top屬性，以確保準確的位置。

來源

2015-08-16 09:12:57

與現代CSS3的一種方式將是：

.divider { 
    position: absolute; 
    top: calc(100vh - 10px); 
}

計算值（）計算顯示高度減去像素值。請注意，操作員必須始終被空白包圍。 More about calc。

來源

2015-08-16 09:22:07

你可以把裏面的另一div和風格像這樣

html, body { 
 
    height: 100%; 
 
} 
 
.divider-container { 
 
    bottom: 0; 
 
    left: 0; 
 
    overflow: visible; 
 
    padding: 0; 
 
    position: absolute; 
 
    width: 100%; 
 
} 
 
.divider-container .divider { 
 
    background: #f00 none repeat scroll 0 0; 
 
    display: block; 
 
    position: absolute; 
 
    text-align: center; 
 
    top: -70px; /*visible top portion of the div*/ 
 
}

<div class="divider-container"> 
 
    <div class="divider"> 
 
     <h2>Sign up</h2> 
 
     <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p> 
 
    </div> 
 
</div>

來源

2015-08-16 09:47:10

確保div距頁面底部的距離

回答

相關問題