网站标题的CSS位置技巧

Question

请检查一下：

我正在做响应式网页设计，我有100％的图像滑块。如果我重新调整我的浏览器大小，图像高度将会改变。

滑块和导航都包含在我的标题中，因此当我响应时，我需要获得标题高度。

我还需要（导航和滑块）top：0px;

我想你可以知道我想说的是什么。

<header>

<nav> <!-- my header main menu goes here --> </nav>

<div class="slider">
<!-- slider images goes here --> 
</div>

</header>

<div class="content">
</div>

<footer>
</footer>

Answer 1

在css中执行此操作：

html,body{
   height:100%;
}

header{
  background:blue;
  height: 100%;
  /*padding-bottom: 120px;*/ //<---remove this
}

nav{
   position:relative;
   top: 0;
   width: 960px;
   margin: 0 auto;
   z-index: 2;
   background: red;
   height: 50px;
}

.slider{
   width:98%
   position:absolute;
   top: 0;
   margin: 0 auto;
   z-index: 1;
   background: green;
   height: 100%;
}

Try this