CSS

Question

我想使用 CSS 创建一个 'sticky' 页脚，如果页面内容的高度不超过浏览器高度，它会粘在页面底部。但是，我希望页眉和页脚填满屏幕的整个宽度，中间有一个固定宽度的内容块，扩展了两者之间的整个高度。我得到的最接近的是下面的示例，但是我无法让灰色内容块填充页眉和页脚之间的整个高度。

<style type="text/css">
    body {
        margin: 0;
        padding: 0;
        height: 100%;
        background: #fff;
    }
    #wrapper {
        min-height: 100%;
        position: relative;
    }
    #header {
        background: #ff0;
        height: 40px;
    }
    #content {
        padding: 10px;
        padding-bottom: 40px; /* Height of the footer */
        width: 700px;
        margin-left: auto;
        margin-right: auto;
        background: grey;
        height: 100%;
    }
    #footer {
        position: absolute;
        bottom: 0px;
        width: 100%;
        height: 40px; /* Height of the footer */
        background: #6cf;
    }
</style>

<div id="wrapper">
    <div id="header">Header</div>
    <div id="content">Content</div>
    <div id="footer">Footer</div>
</div>

Answer 1

我相信这就是您要找的：

html,body{ 
  height:100%;
  margin: 0;
  padding: 0;
}
#wrapper {
  height: 100%;
  position: relative;
}
#header {
  background: #ff0;
  height: 40px;
}
#content {
  padding: 10px;
  width: 700px;
  margin-left: auto;
  margin-right: auto;
  background: grey;
  min-height: calc(100% - 40px - 40px - 20px); /* 100% - height of header - height of footer - vertical padding */
}
#footer {
  position: relative;
  width: 100%;
  height: 40px; /* Height of the footer */
  background: #6cf;
}

<div id="wrapper">
    <div id="header">Header</div>
    <div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec scelerisque at quam ut rutrum. Pellentesque at molestie leo, sit amet sagittis velit. Morbi dapibus ante finibus nulla finibus, eget semper risus lobortis. Nullam in metus non felis egestas hendrerit id non libero. Donec auctor non est ut venenatis. Nulla non tortor ac urna sodales sagittis. Sed blandit arcu a mi venenatis consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Maecenas vel quam purus. Praesent sed eleifend felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin posuere tristique consequat. Fusce congue tortor sed lorem eleifend, sit amet malesuada turpis varius. Pellentesque pretium, velit quis posuere dignissim, nisl velit eleifend nisi, eleifend scelerisque magna libero non nisl. Nullam dapibus sem a ligula cursus, a iaculis lacus scelerisque. Sed sed enim tincidunt, vehicula felis eu, gravida erat. Vestibulum lectus neque, lobortis a varius quis, vestibulum vitae dolor. Curabitur vitae rutrum diam. Nulla facilisi. Proin molestie mi rhoncus, feugiat metus sed, hendrerit risus. Cras et pulvinar tellus, in fringilla turpis.

Praesent auctor tortor ut dolor fermentum, eu facilisis nisi congue. Donec ac nulla rhoncus, condimentum libero vitae, congue ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis faucibus nisi at feugiat aliquam. Quisque tempus malesuada ligula sed ornare. Cras ac urna ut leo vehicula efficitur nec quis elit. Aenean rhoncus molestie neque eget porttitor. Quisque nec dignissim metus. Vivamus mattis sem in consectetur fringilla.

Sed dapibus, eros in ultricies suscipit, sapien risus tincidunt nisi, ultricies efficitur mi justo vel massa. Vestibulum mollis fermentum augue, non suscipit mauris ullamcorper a. Praesent eu vulputate mauris. Suspendisse luctus nisi turpis, sit amet ultrices lorem molestie in. Nam vel lorem cursus, varius diam vitae, finibus sem. Duis ac euismod ligula. In hac habitasse platea dictumst.

Cras tristique nisi at ex lacinia, id gravida nibh venenatis. Aliquam lorem urna, pulvinar a sem in, ullamcorper mollis arcu. Ut in ex vestibulum, rhoncus nisi eu, posuere diam. Ut at justo euismod, hendrerit est non, pharetra augue. Duis ut lacus enim. Nam rhoncus ornare sapien, vitae rhoncus dui placerat nec. Nulla pulvinar, leo ut semper posuere, ante odio dignissim nulla, ac vehicula nisl nisl id velit. Nam dictum leo nunc, in lobortis tellus imperdiet at. Sed turpis orci, dapibus a mollis vitae, dapibus eu tellus. Curabitur mauris felis, venenatis a mattis quis, venenatis et mauris. Aenean sodales turpis non fringilla iaculis. Morbi porta euismod ligula, in tincidunt nisl ullamcorper eget. Nullam aliquet eros eu maximus tincidunt. Ut rutrum quam nec eros lacinia blandit. Integer dignissim egestas diam sed ullamcorper. Aliquam cursus pharetra urna, ut tristique risus feugiat sit amet.</div>
    <div id="footer">Footer</div>
</div>

我为此使用了 calc，但一些浏览器尚不支持它。查看 this 了解更多信息。

CSS - 固定宽度内容的全宽粘性页脚

CSS - Full width sticky footer with constant width content

html

footer

sticky-footer