3

嘿 Stackoverflow 团队，

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

我想要实现的目标： + 始终保持在顶部的页眉，即使在滚动过程中 - 它始终在同一个位置可见， + 页脚粘在页面底部 - 在滚动过程中不可见，除非你会到达底部页的。

我看到以这种方式制作的粘性页脚无法以某种方式固定位置：http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

有任何想法吗？

4

2 回答 2

1

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

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

于 2013-11-05T10:03:25.467 回答
0

亚历山大，你的技术很好。对于我正在从事的项目，我有一些额外的要求。我需要固定的页眉和粘性页脚，还需要一个固定的侧边栏，用于响应式导航。通过您的示例，我能够修改并实现这一点，而无需使用支持不佳的 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>
于 2017-09-06T15:21:28.863 回答