Question

我有一个固定的顶部栏和滚动时出现的页脚。我想要100％的图像，但问题是当你向下滚动时页脚覆盖它们，我怎么能避免这种情况？

这是我的代码：

<body ng-cloak>
    <topbar></topbar>
    <img src="img/leftImage.jpg" id="leftImage" />
    <div id="homescreen" class="container">
        <div ui-view></div>
    </div>
    <img src="img/rightImage.jpg" id="rightImage" />
    <footer></footer>
</body>

body {
  background: url(/img/background.jpg) repeat fixed;
  background-position-y: -50px;
  background-position-x: -50px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#homescreen {
  margin-top: 150px;
}

#leftImage{
  top: 0;
  left: 0;
  width: 150px;
  height: 100%;
  position: fixed;
}

#rightImage{
  top: 0;
  right: 0;
  width: 150px;
  height: 100%;
  position: fixed;
}

我知道如果我把底部：0高度属性无论如何都会这样做。如果我不清楚请问我。谢谢！

Answer 1

flexbox可以帮助您实现粘性页脚：

HTML：

<body class="flexbox-wrapper">
  <main class="page-wrapper">
    <header>HEADER</header>
    <div class="content">CONTENT</div>
  </main>
  <footer>FOOTER</footer>
</body>

CSS：

/* CSS reset*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* styling*/
header, footer, .content {
  padding: 25px;
}
header {
  background: #eee;
}
footer {
  background: #ddd;
}

/* needed code for sticky footer */
html, body {
  height: 100%;
}

.flexbox-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.page-wrapper {
  flex: 1 0 auto;
}

http://codepen.io/dreiv/pen/bgaBam

如果内容大于视口，则页脚默认位于页面底部或内容底部。

Answer 2

您可以position: relative; z-index: 1使用footer

由于您的左右块是固定的，它将位于顶部，因此您需要在其上方设置页脚。如果页脚低于侧边块，则为页脚增加z-index的值。

#leftImage和#rightImage删除height并使用值bottom

例如，这是一个块的代码

#leftImage {
  top: 0;
  left: 0;
  width: 150px;
  bottom: 20px; /* same as the height of footer */
  position: fixed;
}

footer {
  height: 20px;
}

100％高度图像，带有固定的顶杆和一个页脚（未固定）

2 个答案: