CSS: Sticky footer with full-height content DIVs

Question

Я пытаюсь совместить bootstrap sticky footer с full-height content DIVs. По-видимому, на этот вопрос ответил CSS Tricks site, но решение, предложенное jurotek, похоже, было удалено.

Я ранее asked this question, и я думал, что есть решение, но при ближайшем рассмотрении выясняется, что он не работает.

Проблема в том, что полноразмерные DIVs требуют высоты: 100% для всех предков, но липкий нижний колонтитул означает, что вы не можете иметь этот атрибут для элемента HTML. Таким образом, конфликт.

Я собираюсь исследовать с помощью calc() в CSS с использованием высоты окна просмотра, посмотрите, работает ли это.

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

Answer 1

Если вы хотите колонтитулы прокрутки вместе с содержимым страницы, вы можете использовать гибкие дивы:

body { 
 
    height: 100vh; 
 
    width:100%; 
 
    margin:0px; 
 
} 
 

 
#container { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
    -webkit-flex-direction: column; 
 
    flex-direction: column; 
 
    min-height:100%; 
 
} 
 

 
#A { 
 
    flex: 0 0 30px; 
 
} 
 

 
#B { 
 
    flex: 1 1 auto; 
 
} 
 

 
#C { 
 
    flex: 0 0 30px; 
 
}

<div id="container"> 
 
    
 
<div id=A style="background-color:gold;">header</div> 
 

 
<div id=B style="background-color:tomato;"> 
 
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br> 
 
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br> 
 
</div> 
 

 
<div id=C style="background-color:gold;">footer</div> 
 

 
</div>

Answer 2

Если вы хотите, чтобы ваш ДИВ дополнительный контент для прокрутки, вы можете сделать это следующим образом:

body { 
 
width: 100vw; 
 
height: 100vh; 
 
margin: 0px; 
 
} 
 

 
#content { 
 
height: calc(100% - 30px); 
 
background: gold; 
 
overflow-y: auto; 
 
} 
 

 
#footer { 
 
height:30px; 
 
background: tomato; 
 
}

<div id=content> 
 
content<br>content<br>content<br>content<br>content<br> 
 
content<br>content<br>content<br>content<br>content<br> 
 
content<br>content<br>content<br>content<br>content<br> 
 
content<br>content<br>content<br>content<br>content<br> 
 
content<br>content<br>content<br>content<br>content<br> 
 
content<br>content<br>content<br>content<br>content<br> 
 
content<br>content<br>content<br>content<br>content<br> 
 
content<br>content<br>content<br>content<br>content<br> 
 
content<br>content<br>content<br>content<br>content<br> 
 
content<br>content<br>content<br>content<br>content<br> 
 
content<br>content<br>content<br>content<br>content<br> 
 
content<br>content<br>content<br>content<br>content<br> 
 
</div> 
 
<div id=footer>footer text.</div>

Answer 3

Вы пытались использовать новые CSS3 единиц Viewport Высота и ширина Viewport?

Часто, когда я использую динамический контент, то есть ... Динамический по высоте, я сталкиваюсь с такими ошибками. Я мог бы предложить поиграть с height: 100vh; или width: 100vw; и посмотреть, поможет ли он.

Я не вижу ваш текущий код (только код из вашего старого сообщения в SO), поэтому я не могу предоставить эвристическое или лучшее решение.