Высота нижнего колонтитула не заполняет экран?

-2

Я тестировал свой сайт на нескольких устройствах, и при тестировании на экране с высоким разрешением есть все это лишнее свободное пространство под нижним колонтитулом.Высота нижнего колонтитула не заполняет экран?

Как сделать высоту динамического, чтобы устранить эту проблему?

Мой HTML выглядит следующим образом:

<div class="contact"> 
     <div class="content--container"> 
      ........ 
     </div> 
     <div class="container"> 
      <div class="columns is-multiline"> 
       <div class="column is-12"> 
        ....... 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="footer"> 
     ...... 
    </div>

источник

2017-02-10 Dileet

Я уверен, что есть десятки ответов на этот вопрос на SO – Armin

Вы хотите, чтобы он фиксировался всегда внизу? – scoopzilla

Попробуйте добавить их для CSS (это от http://mystrd.at/modern-clean-css-sticky-footer/):

html { 
    position: relative; 
    min-height: 100%; 
} 
body { 
    margin: 0 0 100px; /* bottom = footer height */ 
} 
footer { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    height: 100px; 
    width: 100%; 
}

шаблон HTML для этого есть:

<!DOCTYPE html> 
<head> 
    <title></title> 
</head> 
<body> 
    <nav></nav> 
    <article>Lorem ipsum...</article> 
    <footer></footer> 
</body> 
</html>

Следующая опция должна использовать flexbox, как в примере: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

В этих примере теле имеет class="Site" и содержание также имеет класс, называемый class="Site-content" и выглядит как эти:

<body class="Site"> 
    <header>Your header</header> 
    <main class="Site-content"> 
    <div> Text </div> 
    </main> 
</body>

CSS для этого примера выглядит следующим образом:

.Site { 
    display: flex; 
    min-height: 100vh; 
    flex-direction: column; 
} 

.Site-content { 
    flex: 1; 
}

Полного источник для компонента сайта, используемого в этом примере вы можете найти здесь: https://github.com/philipwalton/solved-by-flexbox/blob/master/assets/css/components/site.css

источник

2017-02-10 17:23:24 Arlid

Как это ответ? Как насчет будущих посетителей, после того как эти ссылки будут потенциально нарушены? – Armin

Да, вы правы. Я добавляю несколько примеров из этих ссылок. Я думаю, что теперь это . – Arlid

Выглядит лучше. Пожалуйста, избегайте использования внешних ссылок в ответах, потому что они могут легко удаляться с течением времени, что сделает ваш ответ непригодным для использования в будущем. – Armin

Быстрое и простое исправление должно заключаться в том, чтобы добавить минимальную высоту в ваш .contact элемент ,

Предполагая, что он сидит прямо инсайдерское ваше тело элемента, и если ваша высота колонтитула 200px, вы могли бы сделать:

.contact { 
    min-height: calc(100% - 200px); 
}

Это требует, чтобы ваше тело либо положение: статический; (по умолчанию) или имеет минимальную высоту 100%.

источник

2017-02-10 17:23:34

Добавить мин-высоту для вашего тела, как это:
```
body { 
    min-height: 100%; 
} 
```
Изменение колонтитула position в absolute так:
```
.footer { 
    position: absolute; 
} 
```

установки и добавить ширину в футере например:

.footer { 
    position: absolute; 
    bottom:0; 
    left:0; 
    width: 100%; 
}

источник

2017-02-10 17:39:23

Еще один простой способ сделать нижний колонтитул похожим на динамическую высоту (если высота высотного нижнего колонтитула не имеет значения для вас) - это изменить фоновый цвет тела в соответствии с нижним колонтитулом. Затем вы можете дать одному из ваших контейнеров ширину 100% и применить другой фоновый цвет.

Это дает визуальное разделение содержимого и нижнего колонтитула без необходимости размещения или изменения размера нижнего колонтитула.

Heres это CSS:

body { 
    background-color: tomato; 
    height: 100%; 
    } 

    header { 
    color: white; 
    padding: 20px; 
    } 

    .container { 
    background-color: white; 
    height: 200px; 
    padding: 20px; 
    width: 100%; 
    } 

    footer { 
    background-color: tomato; 
    color: white; 
    padding: 20px; 
    }

и HTML:

<header> 
    <h1>This is my header</h1> 
</header> 
<div class="container"> 
    <p>This is my content</p> 
</div> 
<footer> 
    <p> this is my footer that looks like it has a variable height.</p> 
</footer>

Ссылка на рабочий пример: http://codepen.io/Brydave/pen/dNQJMb

источник

2017-02-10 19:26:36

Высота нижнего колонтитула не заполняет экран?

ответ

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