位置固定为 100% 高度

Question

我想对 MAIN id 使用 100% 的高度，但是当我将它的 100% 高度设置为 main id 时，创造力 class 被放在了 main 上。当在不同的设备上使用 pixel 作为 main 时，它看起来不同。

有什么解决办法吗？

#main {
 width: 100%;
 height: 675px;
}

.main {
 position: fixed;
 width: 100%;
 height: 100%;
 background: url(/images/logo/logo.svg) center no-repeat #ffcc00;
}

.introduction {
 position: relative;
 display: inline-block;
 z-index: 2;
 width: 100%;
 height: auto;
 background: #fcd803;
 text-align: center;
 padding-bottom: 40px;
}

.introduction h1 {
 text-align: center;
 text-transform: uppercase;
 font-size: 24px;
 padding-top: 40px;
}

.introduction span img {
 width: 200px;
 padding-top: 30px;
}

.introduction div {
 text-align: center;
 margin-left: 30px;
 margin-right: 30px;
 margin-top: 30px;
 font-size: 15px;
 line-height: 21px;
}

.creativity {
 position: relative;
 z-index: 2;
 width: 100%;
 height: 320px;
 background: #fcd803;
}

.creativity-img {
 display: block;
 background: url('/images/ariadesk.png');
 background-repeat:no-repeat;
 background-size:contain;
 background-position:bottom;
 width: 100%;
 height: 320px;
 position: absolute;
}

.creativity-img div {
 position: relative;
 text-align: center;
 padding-top: 145px;
}

.creativity-img div h1 {
 font-size: 20px;
 font-weight: normal;
 text-transform: capitalize;
 color: white;
 border: solid 2px #fff; 
 display: inline-block;
 padding: 10px 50px; 
}

<div id="main">
<div class="main">
 <div class="logo"><h1>HUR</h1><br><span>studio</span></div>
 <div class="nav">
  <ul>
   <a href="#introduction"><li>introduction</li></a>
   <a href="#ourwork"><li>work</li></a>
   <a href="#chooseus"><li>service</li></a>
   <a href="#client"><li>client</li></a>    
   <a href="#aboutus"><li>team</li></a>
   <a href="#contactus"><li>contact</li></a>
  </ul>
 </div>
</div>
</div>
<div class="introduction" id="introduction">
 <h1>introduction</h1>
 <span>
        <img src="/images/icon/intro.svg" alt="">
 </span>
 <div><p>
  We are small team of super nerds and talented creatives. Create cutting-edge interfaces and visually stunnig media.<br>
  Experts in providing innovative Web Design, Graphic Design, Digital Imaging, Advertising and Branding service</p>
 </div>
</div>
<div class="creativity">
 <div class="creativity-img"></div>
</div>

Answer 1

如果您不介意 IE 8 及以下版本，您可以使用 vh（viewport-height）单位：

#main {
    width: 100%;
    height: 100vh;
}

Fiddle

Answer 2

我觉得是因为你的位置

你的#main 与.creativity 处于同一水平

如果您希望 .main 始终位于顶部，只需将 .creativity 更改为 z-index：1 AND 您的 .main 与 z-index: 2

你从来没有设置 .main 索引，它总是在底层。

是你想要的那种情况吗？

位置固定为 100% 高度

Position fixed with 100% height

html

css

css-position