Question

Hey Stackoverflow团队，

我有一个固定页眉和粘性页脚的小问题。代码可在此处获取：http://jsfiddle.net/sgWxh/

我想要实现的目标： +标题始终保持在顶部，即使在滚动期间 - 它始终在同一个地方可见， +粘贴在页面底部的页脚 - 在滚动期间不可见，除非您将到达页面底部。

我看到固定的位置在某种程度上不会以这种方式制作粘性页脚：http：//ryanfait.com/resources/footer-stick-to-bottom-of-page/

任何想法？

Answer 1

刚刚遇到此页面，因为我遇到了同样的问题。而不是margin-top，您必须使用padding-top和box-sizing: border-box：

http://jsfiddle.net/sgWxh/20/

Answer 2

亚历山大，你的技术很好。我对我正在进行的项目有一些额外的要求。我需要固定的标题和粘性页脚，但也需要一个固定的侧栏用于导航，它也是响应式的。通过您的示例，我能够修改并实现该功能，而无需使用支持不良的flexbox或cssgrid。谢谢！这是我的解决方案：

https://jsfiddle.net/jrotondo/zecdv0h5/1/

`

html, body {
  height:100%;   margin:0;padding:0;
}

html {
  background:#fff;
}

.header-container {
  width:100%;
  height:52px;
  background-color:#ccc;
  margin:0 auto;
  position:fixed !important;
  position: absolute; /*ie6 and above*/
  top:0;
  left:0;
  right:0;
}

header {
  width:80%;
  margin:0 auto;
  height:52px;
  text-align:center;
}

aside.sidebar-container {
  background-color:#ff9900;
  margin: 0 0 -52px 0;
  position:fixed !important;
  position: absolute; /*ie6 and above*/
  top: 52px;
  left:0;
}

#content {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  box-sizing: border-box;
}

footer {
  width:100%;
  height: 75px;
  background-color: #666;
  color: #fff;
  margin:0 auto;
  text-align:center;
}

.push {
  height:75px;
}


/*Mobile View*/
@media only screen and (max-width: 1024px) {
  aside.sidebar-container {
    width:100vw;
    height:42px;
    z-index: 1;
  }
  #content {
    padding-top: 94px;
    width: calc(100vw - 40px);
    margin: 0px 20px -75px 20px;
  }
}

@media only screen and (min-width: 1025px) {
  aside.sidebar-container {
    width:192px;
    height:100vh;
    z-index: -1;
  }
  #content {
    padding-top: 62px;
    width: calc(100vw - 232px);
    margin: 0px 20px -75px 212px;
  }
}

`

    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Fixed Header / Sticky Footer</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="header-container">
    <header>
      Fixed Header
    </header>
  </div>
  <aside class="sidebar-container">
    <nav class="main-nav">
      Fixed Nav
    </nav>
  </aside>
  <div id="content">
    <p>
      Praesent tortor massa, ultrices in mattis non, viverra vitae eros. Fusce egestas suscipit nulla tincidunt cursus.
      Etiam eget tortor sit amet arcu bibendum bibendum nec in lorem. Phasellus posuere placerat mi, et consequat sem molestie ut.
      Sed eget sapien sed lacus laoreet vestibulum sit amet nec lectus. Aenean sed tortor turpis. Morbi consectetur diam quis augue
      convallis iaculis. Curabitur pulvinar scelerisque euismod. Cras et sagittis mauris. Mauris nisl ipsum, bibendum et congue vitae,
      blandit id sapien. Suspendisse ipsum metus, vehicula quis ultrices at, interdum quis nunc. Aenean fermentum hendrerit nisl vitae
      euismod. Morbi dictum mattis tellus, ac ornare sapien venenatis quis.
    </p>
    <p>
      Praesent tortor massa, ultrices in mattis non, viverra vitae eros. Fusce egestas suscipit nulla tincidunt cursus.
      Etiam eget tortor sit amet arcu bibendum bibendum nec in lorem. Phasellus posuere placerat mi, et consequat sem molestie ut.
      Sed eget sapien sed lacus laoreet vestibulum sit amet nec lectus. Aenean sed tortor turpis. Morbi consectetur diam quis augue
      convallis iaculis. Curabitur pulvinar scelerisque euismod. Cras et sagittis mauris. Mauris nisl ipsum, bibendum et congue vitae,
      blandit id sapien. Suspendisse ipsum metus, vehicula quis ultrices at, interdum quis nunc. Aenean fermentum hendrerit nisl vitae
      euismod. Morbi dictum mattis tellus, ac ornare sapien venenatis quis.
    </p>
    <p>
      Praesent tortor massa, ultrices in mattis non, viverra vitae eros. Fusce egestas suscipit nulla tincidunt cursus.
      Etiam eget tortor sit amet arcu bibendum bibendum nec in lorem. Phasellus posuere placerat mi, et consequat sem molestie ut.
      Sed eget sapien sed lacus laoreet vestibulum sit amet nec lectus. Aenean sed tortor turpis. Morbi consectetur diam quis augue
      convallis iaculis. Curabitur pulvinar scelerisque euismod. Cras et sagittis mauris. Mauris nisl ipsum, bibendum et congue vitae,
      blandit id sapien. Suspendisse ipsum metus, vehicula quis ultrices at, interdum quis nunc. Aenean fermentum hendrerit nisl vitae
      euismod. Morbi dictum mattis tellus, ac ornare sapien venenatis quis.
    </p>
    <p>
      Praesent tortor massa, ultrices in mattis non, viverra vitae eros. Fusce egestas suscipit nulla tincidunt cursus.
      Etiam eget tortor sit amet arcu bibendum bibendum nec in lorem. Phasellus posuere placerat mi, et consequat sem molestie ut.
      Sed eget sapien sed lacus laoreet vestibulum sit amet nec lectus. Aenean sed tortor turpis. Morbi consectetur diam quis augue
      convallis iaculis. Curabitur pulvinar scelerisque euismod. Cras et sagittis mauris. Mauris nisl ipsum, bibendum et congue vitae,
      blandit id sapien. Suspendisse ipsum metus, vehicula quis ultrices at, interdum quis nunc. Aenean fermentum hendrerit nisl vitae
      euismod. Morbi dictum mattis tellus, ac ornare sapien venenatis quis.
    </p>
    <p>
      Praesent tortor massa, ultrices in mattis non, viverra vitae eros. Fusce egestas suscipit nulla tincidunt cursus.
      Etiam eget tortor sit amet arcu bibendum bibendum nec in lorem. Phasellus posuere placerat mi, et consequat sem molestie ut.
      Sed eget sapien sed lacus laoreet vestibulum sit amet nec lectus. Aenean sed tortor turpis. Morbi consectetur diam quis augue
      convallis iaculis. Curabitur pulvinar scelerisque euismod. Cras et sagittis mauris. Mauris nisl ipsum, bibendum et congue vitae,
      blandit id sapien. Suspendisse ipsum metus, vehicula quis ultrices at, interdum quis nunc. Aenean fermentum hendrerit nisl vitae
      euismod. Morbi dictum mattis tellus, ac ornare sapien venenatis quis.
    </p>
    <div class="push"></div>
  </div>
  <footer> Sticky Footer</footer>
</body>

</html>

固定标题+粘性页脚

2 个答案: