坚持页面底部的内容

Question

我的问题：

我设计了单页。标题，内容（部分和旁边）和页脚。

页脚和页眉是粘性的。

我希望内容能够贴在页面末尾和页脚之上。

请指导我。

Answer 1

你是暗示这样的事吗？在这个例子中。无论屏幕尺寸如何，您的内容都会始终粘贴在页脚上，即使其中只有一行。

＆＃13;

＆＃13;

*{
  box-sizing: border-box;
}
body, html{
  height: 100%;
  width: 100%;
  margin: 0;
}
body{
  display:flex;
  flex-direction: column;
}
#container
{
    margin: 0 auto;
    width:90%;
    background-color: white;
    border: 2px solid black;
    flex-shrink:0;
    flex-grow:1;
    display:flex;
}
.header,.footer
{
    margin: 0 auto;
    width:100%;
    text-align: center;
    height:1.5em;
    background-color: white;
    border: 1px solid black;
    flex-shrink:0;
    background-color:green;
  color:white;
}
.col {
    height:90%;
    flex-shrink:0;
    flex-grow:1;
    margin:0 2% 0 2%;
}

＆＃13;

<div class="header">
  Header here
</div>
<div id="container">
  <div class="col">
    test column 1
    <p>
    Content
    </p>
    <p>
    Content
    </p>
    <p>
    Content
    </p>
  </div>
  <div class="col">
    test column 2
    <p>
    Content
    </p>
    <p>
    Content
    </p>
    <p>
    Content
    </p>
  </div>
</div>
<div class="footer">
Footer Here
</div>

＆＃13;

＆＃13;

＆＃13;