Позиционирование абсолютное снизу

Моя веб-страница отлично выглядит на моем экране. У меня есть все divs, помещенные с тегом body, с телом, имеющим относительное отравление, чтобы он мог действовать как контейнер для веб-страницы. Единственное, что я не могу получить, чтобы divs внутри тела делать, это положение абсолютное снизу. Я не знаю, почему это не сработает. Потому что, когда я посещаю страницу на другом экране, divs расположены не так далеко, когда я использую top, поэтому вместо этого я пытаюсь использовать нижнее позиционирование.Позиционирование абсолютное снизу

HTML код:

<body> 
    <div id="statement_div"> <p id="statement"> Access to Every Bad Movie Ever. </p> </div> 

    <div id="signin_button"> <span style="position: relative; top: 3px"> Sign In </span> </div> 
    <div id="create_account_button"> <span style="position: relative; top: 3px"> Create Account </span> </div> 
</div>

код CSS:

body { 
background-repeat: no-repeat center; 
background-size: cover; 
background-attachment: fixed; 
margin: 0; 
height: 100%; 
width: 100%; 
min-width: 1200px; 
position: relative; 
} 

#signin_button { 
width: 12%; 
min-width: 150px; 
height: 40px; 
color: white; 
background-color: #FF3030; 
cursor: pointer; 
text-align: center; 
position: absolute; 
bottom: 10px; 
left: 70%; 
font-size: 20px; 
border-radius: 5px; 
font-family: Futura; 
} 

#create_account_button { 
width: 16%; 
min-width: 150px; 
height: 40px; 
color: white; 
background-color: #3399FF; 
cursor: pointer; 
text-align: center; 
position: absolute; 
bottom: 10px; 
left: 83%; 
font-size: 20px; 
border-radius: 5px; 
font-family: Futura; 
}

источник

2015-10-25 Hanker

Абсолютное позиционирование - это ** очень ** плохой способ выкладки веб-страниц. Он чрезвычайно негибкий, и есть намного лучшие и более гибкие варианты. Проверьте [** LearnLayout.com **] (http://learnlayout.com/) –

Почему ты не попробовать использовать position: fixed? например:

#signin_button { 
    width: 12%; 
    min-width: 150px; 
    height: 40px; 
    color: white; 
    background-color: #FF3030; 
    cursor: pointer; 
    text-align: center; 
    position: fixed; /* this is the only thing you need to do differently */ 
    bottom: 10px; 
    left: 70%; 
    font-size: 20px; 
    border-radius: 5px; 
    font-family: Futura; 
}

источник

2015-10-25 16:51:43 kennasoft

тело должно иметь мин-высота установки до 100vh (100% высоты окна просмотра)

body { 
 
background-repeat: no-repeat center; 
 
background-size: cover; 
 
background-attachment: fixed; 
 
margin: 0; 
 
height: 100%; 
 
width: 100%; 
 
min-width: 1200px; 
 
position: relative; 
 
/* HERE'S THE DEAL */ min-height: 100vh; 
 
} 
 

 
#signin_button { 
 
width: 12%; 
 
min-width: 150px; 
 
height: 40px; 
 
color: white; 
 
background-color: #FF3030; 
 
cursor: pointer; 
 
text-align: center; 
 
position: absolute; 
 
bottom: 10px; 
 
left: 70%; 
 
font-size: 20px; 
 
border-radius: 5px; 
 
font-family: Futura; 
 
} 
 

 
#create_account_button { 
 
width: 16%; 
 
min-width: 150px; 
 
height: 40px; 
 
color: white; 
 
background-color: #3399FF; 
 
cursor: pointer; 
 
text-align: center; 
 
position: absolute; 
 
bottom: 10px; 
 
left: 83%; 
 
font-size: 20px; 
 
border-radius: 5px; 
 
font-family: Futura; 
 
}

<div id="statement_div"> 
 
    <p id="statement"> Access to Every Bad Movie Ever.</p> 
 
</div> 
 

 
<div id="signin_button"> 
 
    <span>Sign In</span> 
 
</div> 
 

 
<div id="create_account_button"> 
 
    <span>Create Account</span> 
 
</div>

источник

2015-10-25 16:54:32

Просто удалите position: relative; стиль из body тега, как это довольно много ненужного и вызывающая проблема, поскольку это время, когда высота тела занимает 100% -ную высоту контента, а не экран.

источник

2015-10-25 16:54:48

Позиционирование абсолютное снизу

ответ

Смежные вопросы