Как сделать нижний колонтитул в нижней части всех размеров экрана, когда у вас разные страницы высот?

Question

Я пытаюсь сделать липкий нижний колонтитул, но по какой-то причине (ей) он играет вверх. У меня есть несколько страниц с разной высотой контента, поэтому, когда я устанавливаю нижний колонтитул на одном из них, он разрушает остальные. Как создать глобальный стиль для всех страниц, чтобы иметь липкий нижний колонтитул в нижней части страниц, а также удалить любую прокрутку, если это не нужно, так как некоторым из моих страниц требуется прокрутка для достижения нижнего колонтитула, в то время как содержание примерно есть высота.

Как я тестирую свой сайт с помощью веб-сайта под названием screen-fly, чтобы включить тестирование на всех размерах экрана. Мне нужно решение, которое может гарантировать отзывчивый дизайн на любом размере экрана.

Мой код доступен на плункерах, однако я много исследовал и пробовал некоторые решения для стилизации. Вот два из них

Решение 1: -

/* **************************************************/ 
         /* One solution */ 
    html, body { 
     height:100%; 
     min-height:100%; 
    } 
         /* navigation style*/ 
    .navbar-brand { 
    margin: 0 auto; 
    color:white; 
    } 
    .navbar-inverse { 
    background: rgb(14, 78, 114); 
    } 
    .navbar-inverse .navbar-nav>li>a { 
    color: #8EE8CD; 
    } 

    /* Content style*/ 
    .container.content { 
    margin-top: 100px; 
    } 

         /* footer style*/ 
    .wrapper { 
     position:relative; 
     min-height:100%; 
    } 
    footer { 
     text-align: center; 
     position:absolute; 
     bottom:0px; 
     width:100%; 
     color: white; 
    background-color: rgb(14, 78, 114); 
    } 

Solutoin 2: -

/* Another solution */ 

    html, body {height: 100%;} 

    #wrap {min-height: 100%;} 

    #main {overflow:auto; 
    padding-bottom: 150px;} /* must be same height as the footer */ 

    #footer {position: relative; 
    margin-top: -150px; /* negative value of footer height */ 
    height: 150px; 
    clear:both;} 

    /*Opera Fix*/ 
    body:before { 
    content:""; 
    height:100%; 
    float:left; 
    width:0; 
    margin-top:-32767px; 
    } 

Вот некоторые likns кода.

plunker Редактора: Plunker Editor

plunker полный экран: Plunker Full Screen

Мой сайт на screenfly: Screenfly Site

Answer 1

Использование CSS calc() функции. В соответствии с вашим примером plunkr дайте min-height .container.content вместо этого, чтобы дать min-height до html, body, wrapper.

Посмотрите обновленные Plunkr.

---

Логика используется, чтобы дать min-height:

.container.content { 
    min-height: calc(100vh - 140px); 
} 

В приведенном выше коде:

• vh: Viewport Высота (100vh дает общая высота экрана)
• 140px: 100px для заголовка + 20px для нижнего колонтитула + 20px для верхнего края нижнего колонтитула.

Таким образом, мы просто вычитаем остальную часть div с общей высоты видового экрана.

Answer 2

перелива Try: скрытый; для тела.

Answer 3

Это распространенная проблема, которую многие пытаются решить. В течение долгого времени он требовал компромисса или какого-то взломанного CSS. К счастью, с рассветом Flexbox это довольно просто. Проверьте ссылку ниже.

https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/

Эта страница проходит через решение проблем, как у тебя с Flexbox и вы пройдете через него.

Answer 4

Изменить стиль колонтитула

position: absolute; 

в

position: fixed; 

Надежда, которая является то, что вы хотели бы достичь :)

Answer 5

Для этих случаев я бы использовал Flexbox. Это дает возможность полностью удалить вашей обертку ДИВА .wrapper

Чтобы добиться того, что вы хотите просто добавить следующий код в CSS

body { 
    display: flex; 
    flex-direction: column; 
} 

и изменить CSS вашего колонтитула DIV, в вашем случае footer к это

footer { 
    margin-top: auto; 
    text-align: center; 
    color: white; 
    background-color: rgb(14, 78, 114); 
}