多個全屏部分與絕對定位的div內

-1

我正在創建一個網站，我希望每個部分佔用全屏。我有：多個全屏部分與絕對定位的div內

html, body { 
height: 100%; 
width: 100%; 
margin: 0; 
}

並且每個部分都有100％的高度和寬度以及相對位置。在第二部分裏面，我想創建四個div來佔據每個角落。他們共享一個具有50％高度和寬度以及絕對位置的課程。我試圖通過選擇每個ID並將它們放在最前面來單獨定位它們：0 left：0，top：0 right：0，依此類推。

問題是，左側和右側定位起作用，但是當我嘗試定位頂部或底部時，div將會移到第一部分的頂部或底部，而不是第二部分。我認爲這可能是一個問題，因爲有兩個100％的div彼此之間，但我不知道。真的很感激任何建議！

來源

2015-08-14 midpointman

我還試圖創建在第二區段內兩個div，各有50％的高度，然後將兩個div在每一個的左側和右側。這也沒有奏效。 – midpointman

不知道你有什麼問題（或者我理解它是正確的），但我創建了一個像你提到的樣本，它工作正常，像這樣[一]（http://jsfiddle.net/vr3zacr4/） –

你可以創建一個小提琴請？ –

看到你的小提琴後，我看到你在課堂上「。工作」寫錯字「位置」，旁邊則可以添加兩個div「.hero」和」之間的明確的股利。工作」，它會工作

<!--==== HEADER =============================================--> 

     <div class="header"> 
      <div class="container"> 
       <ul> 
        <li><a href="#">Home</a></li><!-- 
       --><li><a href="#">Work</a></li><!-- 
       --><li><a href="#">About</a></li><!-- 
       --><li><a href="#">Contact</a></li> 
       </ul> 
      </div><!-- container --> 
     </div><!-- header --> 


     <!--===== HERO =============================================--> 

     <div class='hero' data-type="background" data-speed="10"> 
      <div class='name'> 
       <h1>kdjfkd</h1> 
       <h2>fdasfdr</h2> 
       <h2><span >fgafd</span></h2> 
      </div> 
     </div><!-- hero --> 
<div style="clear:both"></div> 


<!-- ============= WORK ==================  --> 

     <div class='work'> 

      <div class="same2" style="background-color:red; top:0;left:0"></div> 
      <div class="same2" style="background-color:yellow; top:0;right:0"></div> 
      <div class="same2" style="background-color:white; bottom:0;left:0"></div> 
      <div class="same2"style="background-color:green; bottom:0;right:0"></div> 

     </div>

.work{ 
     height: 100%; 
     width: 100%; 
     position: relative; 
    }

Demo

編輯：不需要「明確：既」的話，那還是做工精細

來源

2015-08-14 04:23:49

多個全屏部分與絕對定位的div內

回答

相關問題