Колонтитул, который является абсолютным донным = 0, не остается в нижней

Это то, что я пытался до сих пор:Колонтитул, который является абсолютным донным = 0, не остается в нижней

.content{ 
 
     margin-bottom: 50px; 
 
    } 
 
    .bottom{ 
 
    position:absolute; 
 
    height:50px; 
 
    line-height: 50px; 
 
    bottom:0; 
 
    width:80%; 
 
    background:green; 
 
    }

<div class="content"> 
 
     ...... 
 
    </div> 
 
    <footer class="bottom"> 
 
     <p> 
 
     this is always at bottom 
 
     </p> 
 
    </footer>

Вот Fiddle пример слишком ,

Кто-нибудь знал, почему это происходит, и как я могу это решить?

Спасибо!

источник

2016-12-09 walkinsky

Вы должны использовать положение: фиксированное, для достижения этого!

CSS

<style type="text/css"> 
.content{ 
    margin-bottom: 50px; 
} 

.bottom{ 
position:fixed; 
height:50px; 
line-height: 50px; 
bottom:0; 
width:80%; 
background:green; 
} 


</style>

HTML

<div class="content"> 
    ......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br> ......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br> ......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br> ......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br> ......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br> ......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br> 
</div> 
<footer class="bottom"> 
    <p> 
    this is always at bottom 
    </p> 
</footer>

источник

2016-12-09 07:04:37

Спасибо! но я знаю, что «исправлено» работает, я хочу знать, почему «абсолютный» не работает! – walkinsky

1.You имеют внести небольшие изменения в CSS.According к вашему demo link.

.parent { 
    height:1500px; 
    width:200px; 
    border:1px solid grey; 
    position: relative; 
    background-color: white; 
} 
.topDiv { 
    display:block; 
    background:silver; 
    width:100px; 
    height:100px; 
    position:absolute; 
    top:0; 
    left:0 
} 

.bottomDiv { 
    background:red; 
    width:100px; 
    height:100px; 
    position:absolute; 
    bottom:0; 
} 

body { 
    height:1500px; 
    background: linear-gradient(#111, #777); 
}

источник

2016-12-09 07:22:58

Колонтитул, который является абсолютным донным = 0, не остается в нижней

ответ

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