Держите колонтитул в нижней части страницы

Question

я получил следующее:

<div class="wrapper"> 
    <div class="top"> 
    </div> 

    <div class="left"> 
    </div> 

    <div class="main"> 
    </div> 

    <div class="footer"> 
    </div> 
</div> 

Со следующим CSS:

.top {                   
    position: absolute;               
    left: 0;                  
    height: 80px;                
    width: 100%;                 
} 


.left {                   
    position: absolute;               
    left: 0; top: 80px; bottom: 100px;           
    width: 200px;                
    margin-left: 5px;               
} 

.main {                   
    position: absolute;               
    left: 200px; top: 80px; bottom: 100px;          
    width: 84%;                              
} 

.footer { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
} 

я хотел бы сохранить footer в нижней части страницы (после left и main, и независимо от того, насколько большой/маленький main), но с position: fixed нижний колонтитул прокручивается вверх/вниз при прокрутке страницы. Я пробовал position: absolute, и это не толкает нижний колонтитул до конца. Я пробовал некоторые из других решений, найденных здесь, и никто не работал. Как я могу сохранить нижний колонтитул в нижней части страницы (аналогично footer внизу этой страницы)?

Заранее благодарен!

Answer 1

Попробуйте это:

.footer{ 
    position:absolute; 
    bottom:0 
} 

Позиция абсолютного движения колонтитул в соответствии с элементом, который его содержит. Внизу 0 удерживается нижний колонтитул внизу его родителя.

Это будет работать, если родительский элемент элемента с абсолютным расположением имеет относительное положение. Для того, чтобы сказать, что это более конкретно, ваши wrapper потребности иметь следующий код:

.wrapper{ 
    position: relative 
} 

Answer 2

Fixed делает то, что вы описываете, запирает элементы с вашего просмотра. Absolute заставляет элемент игнорировать поток остальной части вашей страницы, поэтому, если вы хотите, чтобы он ушел под все остальное, у вас возникнут проблемы. Дайте этот снимок, он поместит его под весь ваш контент.

footer{ 
    position: relative 
    width: 100% 
    float: left 
} 

Если вам это нужно, чтобы остаться в самом низу экрана, когда у вас есть очень короткое содержание, вы можете добавить элемент обертку вокруг все и попробовать что-то вроде этого

.wrapper{ 
    display: block; 
    min-height: 100vh; 
    position: relative; 
    padding-bottom: footer height (set this to how tall your footer is) 
} 
footer{ 
    position: absolute; 
    bottom: 0; 
} 

Answer 3

Дайте этому перейти:

html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
#container { 
    min-height:100%; 
    position:relative; 
} 
#header { 
    background:#ff0; 
    padding:10px; 
} 
#body { 
    padding:10px; 
    padding-bottom:60px; /* Height of the footer */ 
} 
    .left {                   
float:left;           
width: 200px;                
margin-left: 5px;               
} 
#right { 
    float:left; 
} 
#footer { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:60px; /* Height of the footer */ 
    background:#6cf; 
} 

А для старых браузеров:

#container { 
    height:100%; 
} 

Answer 4

Не используйте положение для каждого <div> вам нужно только добавить позицию .footer

Here is a working example...