Убедитесь, что расстояние от div находится в нижней части страницы

Question

У меня есть <div> (например, Зарегистрируйтесь, чтобы получить уведомление). Я бы хотел разместить верхнюю часть div на некотором расстоянии от нижней части браузера (независимо от размера). Цель состоит в том, чтобы люди увидели верхнюю часть div и хотите прокрутить вниз, чтобы увидеть остальную часть div. Я пробовал это, но верхняя часть div исчезает, когда я изменяю размер браузера. Мой CSS:

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

Благодарим за помощь!

Answer 1

Используйте атрибут 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, чтобы обеспечить точное положение.

Answer 2

Путь с современным CSS3 будет:

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

известково() вычисляет высоту дисплея минус значение пикселя. Обратите внимание, что оператор всегда должен быть окружен пробелами. More about calc.

Answer 3

вы можете поместить 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>