确保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距页面底部的距离

回答

相关问题