Вопрос по css – Как определить липкий нижний колонтитул переменной высоты в чистом CSS?

38

Здесь необходимо отметить, что высота нижнего колонтитула не будет фиксированной, но будет зависеть от ее содержимого.

Когда я говорю «липкий нижний колонтитул», ##201D; Я использую его в том, что, как я понимаю, является общим определением нижнего колонтитула, который никогда не превышает нижнюю часть области просмотра, но если контента достаточно, он будет скрыт до тех пор, пока пользователь не прокрутит его достаточно далеко, чтобы увидеть это & # x201D.

Обратите внимание, что мне не нужно поддерживать устаревшие браузеры. Если CSSdisplay: table & Амп; здесь помогают связанные свойства, они являются честной игрой.

Ваш Ответ

3   ответа
0

Error: User Rate Limit Exceeded

position: fixed;
bottom: 0;

Error: User Rate Limit Exceeded

Error: User Rate Limit Exceeded

(window.onscroll = function() {
    var foot = document.getElementById('footer');
    foot.style.position = "static";
    if( foot.offsetTop < document.documentElement.scrollTop + document.body.scrollTop + document.documentElement.offsetHeight - foot.offsetHeight)
        foot.style.position = "fixed";
})();

Error: User Rate Limit Exceeded(...)();Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
14

Error: User Rate Limit ExceededError: User Rate Limit Exceeded

Error: User Rate Limit Exceededdisplay: table-cellError: User Rate Limit Exceededdisplay: block.

HTML

<body class="Frame">
    <header class="Row"><h1>Catchy header</h1></header>
    <section class="Row Expand"><h2>Awesome content</h2></section>
    <footer class="Row"><h3>Sticky footer</h3></footer>
</body>

CSS

.Frame {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
}
.Row {
    display: table-row;
    height: 1px;
}
.Row.Expand {
    height: auto;
}
Error: User Rate Limit Exceededtable-cellError: User Rate Limit Exceededtable-rowError: User Rate Limit ExceededCSS flexbox model.
Error: User Rate Limit Exceededtable-layout: fixed;Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded Alan H.
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
84

Error: User Rate Limit ExceededtableError: User Rate Limit Exceeded

Error: User Rate Limit ExceededError: User Rate Limit ExceededError: User Rate Limit Exceeded

Error: User Rate Limit Exceeded

Error: User Rate Limit ExceededError: User Rate Limit ExceededError: User Rate Limit Exceeded

html, body {
  height: 100%;
  margin: 0; padding: 0;  /* to avoid scrollbars */
}

#wrapper {
  display: flex;  /* use the flex model */
  min-height: 100%;
  flex-direction: column;  /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}

#header {
  background: yellow;
  height: 100px;  /* can be variable as well */
}

#body {
  flex: 1;
  border: 1px solid orange;
}

#footer{
  background: lime;
}
<div id="wrapper">
  <div id="header">Title</div>
  <div id="body">Body</div>
  <div id="footer">
    Footer<br/>
    of<br/>
    variable<br/>
    height<br/>
  </div>
</div>

Error: User Rate Limit Exceededmin-height: 100%Error: User Rate Limit Exceededheight: 100%Error: User Rate Limit Exceededmin-heightError: User Rate Limit Exceededheight.
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded Alan H.
Error: User Rate Limit Exceeded

Похожие вопросы