Несколько полноэкранных разделов с абсолютными позиционируемыми внутренними ячейками внутри

-1

Я создаю веб-сайт и хочу, чтобы каждый раздел занимал весь экран. У меня есть:Несколько полноэкранных разделов с абсолютными позиционируемыми внутренними ячейками внутри

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

и каждый раздел имеет высоту и ширину 100% и относительное положение. Внутри второго раздела я хочу создать четыре divs, которые занимают каждый угол. Они имеют класс, который имеет высоту и ширину 50% и абсолютную позицию. Я попытался разместить их по отдельности, выбрав каждый идентификатор и указав top: 0 left: 0, top: 0 right: 0 и т. Д.

Проблема в том, что левое и правое позиционирование работает, но когда я пытаюсь позиционировать верхнюю или нижнюю часть, div будет идти в верхнюю или нижнюю часть первой секции вместо второй. Я думаю, что это может быть проблемой, когда у меня есть два 100% divs друг на друга, но я не уверен. Был бы очень признателен за любой совет!

источник

2015-08-14 midpointman

Я также пытался создать две дивы в рамках второй секции, каждая из которых с высоты 50%, а затем помещая две дивы с левой и правой стороны каждого из них. Это тоже не сработало. – 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

Edit: не нужно «ясно: как» вообще, это все еще работают прекрасные

источник

2015-08-14 04:23:49

Несколько полноэкранных разделов с абсолютными позиционируемыми внутренними ячейками внутри

ответ

Смежные вопросы