Question

我正在使用Drupal网站并使用vegas全屏bg。我想实现以下目标： enter image description here 但是我对页脚的主题有些麻烦：我希望它始终显示在背景图像下（所以你必须向下滚动才能看到页脚）现在它不断地覆盖在背景图像上。除此之外，我希望主菜单和页脚成为全宽，而不是像容器一样960px。但我似乎无法让这两个人“突破”这个容器。

现在我：

#footer {
    position: absolute;
    bottom:0;
    width: 100%;
    height:100px;
    background-color: #202020;
}

#primary-menu-bar{
  position: absolute;
  width: 100%;
  height: 60px;
  padding: 0;
  margin: 0;
  background-color: rgba(255,255,255,0.70);
  padding-top: 10px;
}

通常这样的事情可以解决这个问题，但我很难做到这一点......

有人提出任何建议或解决方案吗？

Answer 1

您没有显示任何HTML，所以我自己想出了一些HTML。如果页脚仅在向下滚动时可见，则需要为标题和内容元素设置某种包装。然后，您可以将包装器min-height设置为100％，并使用background-image / background-size获取全屏图像背景。

<强> HTML：

<div class="wrapper">
    <header class="page-head" role="banner">
        Header
    </header>
    <main class="main" role="main">
        Content
    </main>
</div>
<footer class="page-foot" role="contentinfo">
    Footer
</footer>

<强> CSS：

html, body {
  height: 100%;
}

.wrapper {
  min-height: 100%;
  background-image: url(http://placehold.it/1200x800);
  background-position: center center;
  background-size: cover;
}

.page-head {
  background: red;
}

.main {
  width: 80%;
  margin: 0 auto;
  background: yellow;
}

.page-foot {
  background: blue;
}

请参阅此pen上的示例。

Answer 2

我们真的很难用HTML做这样的事情。

所以基本上你需要做的是将页脚和标题放在容器外面。因为容器是960px，所以页眉和页脚可以覆盖它。

结构应该是这样的：

    <body>
     <header></header>
     <div class="container"></div>
     <footer></footer>
    </body>

codepen

上的示例

Answer 3

这是一个可能的解决方案：http://jsfiddle.net/09mcoo2h/1/

正如我在你的问题下面的评论中所说：你需要在容器外面设置页脚和标题（这是唯一的960px）

要将页脚设置为页面的底部，只需将正文设置为位置：relative。

<强> HTML

<div id="primary-menu-bar"></div>

<div id="container"></div>

<div id="footer"></div>

<强> CSS

body {
    margin:0;
    padding:0;
    position:relative;
}

#container {
    display:block;
    width:960px;
    height:1600px;
    background:#eee;
    margin:0 auto;
}

#footer {
    position: absolute;
    bottom:0;
    width: 100%;
    height:100px;
    background-color: #202020;
}

#primary-menu-bar{
  width: 100%;
  height: 60px;
  top:0;
  background-color: #F00;
  padding-top: 10px;
}

960px容器，但全屏页眉/页脚在全屏bg图像上方/下方

3 个答案: