Расположение внутри секции с высотой: 100% и шириной: 100%

Question

Как правильно позиционировать раздел «портфолио», чтобы он не отставал от раздела «контакт» и что он растягивается и сжимается в зависимости от размера экран (как и фоновые фотографии) ??? Можно ли это сделать только с помощью CSS и преимуществ? Я пробовал много разных комбинаций, но без успеха.

Высота каждой секции всегда 100%. Такова ширина.

http://jsfiddle.net/zwwve/9/

<section id="home" class="photobg"> 
     <div class="inner"> 
       <div class="copy"> 
        <h1>Home</h1> 
        <p>Some text here!</p> 
       </div> 
     </div> 
</section> 

Answer 1

Вот грубая идея: http://jsfiddle.net/derekstory/zwwve/17/

Для восстановления скрытого раздела портфолио, положить Div обертку вокруг него. CSS не требуется для обертки.

Для масштабирования вы хотите удалить ширину галереи. Возможно, установите минимальную ширину.

.gallery { 
    min-width: 500px; 
    margin-left: auto; 
    margin-right: auto; 
} 

Для портфолио портфеля вы также можете дать им процент и минимальную ширину.

.project { 
    display: inline; 
    float: left; 
    height: auto; 
    position: relative; 
    width: 20%; 
    min-width: 120px; 
    margin-top: 40px; 
    margin-left: 40px; 
    margin-right: 20px; 
} 

Его грубая, но основная идея.

Answer 2

У вас была фиксированная ширина для класса .gallery, который я изменил до 100%, теперь проекты попадают под друг друга, когда размер экрана уменьшается.

Я также изменил положение и нижнюю часть контактного div, чтобы он мог быть внизу.

JSFIDDLE

Добавлено/Изменено CSS:

.gallery { 
    width: 100%; 
    margin-left: auto; 
    margin-right: auto; 
} 

#contact{ 
    position: relative; 
    top: 1000px; 
}