Question

我试图获得something like this（100％高度背景图片，底部有菜单），但无法弄清楚如何到达那里。

我的问题是，无论我在HTML代码中包含<div class="main-menu">的哪个位置，它都会变得不可见或无法放置在应有的位置......请参阅my jsfiddle here。

或者另一个更好的选择可能是让背景图片占据视口高度的100％减去50px（菜单的高度）？

感谢您的帮助

CSS

html,body{height: 100%} 

body {
  background-color: #ffffff;
  font: 300 1em/1.38 'Open Sans';
  color: rgb(128, 128, 128);
}

header {
  position: relative;
  float: left;
  z-index: 12;
  width: 100%;
  height: 90%;
}

.element {
  float: left;
  width: 100%;
  height: 100%;
  background-size: 100% auto;
  background-attachment: fixed;
}

.element-1 {
  position: relative;
  z-index: 8;
  border-top: 10px solid rgb(0, 0, 0);
  background-image: url('http://placekitten.com/800/800?image=1');
  background-position: center center;
  background-color: rgb(222, 222, 222);
}
.main-menu {
    width: 100%;
    height: 50px;
    background: #358acb;
    position: absolute;
    color: #000;
}

HTML

 <header>
    <div class="element element-1"></div>

  </header>  
  <p class="logo">LOGO</p>
  <article>  <div class="main-menu">This will be the menu</div>

Answer 1

底部：0像素; 左：0; z-index：20;如果我理解正确，这应该解决你的问题，然后当然需要一些样式。

.main-menu {
   width: 100%;
   height: 50px;
   background: #358acb;
   position: absolute;
   color: #000;
   bottom:0px;
   left: 0;
   z-index:20;
 }

请参阅DEMO

视口底部的菜单然后粘到顶部

1 个答案: