Question

我想用CSS创建一个粘性的＆＃39;如果页面内容的高度不超过浏览器高度，则页脚会粘到页面底部。但是我希望页眉和页脚填满整个屏幕宽度，其间有一个固定宽度的内容块，它们在两者之间延伸了整个高度。我得到的最接近的是下面的示例，但是我无法获得灰色内容块来填充页眉和页脚之间的整个高度。

<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 - 具有恒定宽度内容的全宽粘性页脚

1 个答案: