Переместить divs вертикально внутри большего div

Question

Я делаю анимацию, которая включает в себя набор из четырех divs внутри одного большего div. Четыре divs слишком велики, чтобы все соответствовали одному div сразу, поэтому я хочу указать позицию, в которой должен начинаться более крупный div. Например, здесь у меня четыре поля внутри div. Сверху вниз коробки зеленые, фиолетовые, розовые и синие (вы не можете видеть синий в текущем jsfiddle, потому что он отключен). Я бы хотел, чтобы BOTTOM из более крупного divldisplay div соответствовал MIDDLE синего квадрата, а все остальное - над шляпой до тех пор, пока оно не будет отсечено в верхней части div. В конце концов, я собираюсь внедрить специальную кнопку прокрутки (так как я не хочу, чтобы она выглядела как переполнение: прокрутка), но на данный момент я просто пытаюсь заставить CSS отображать внутренние divs так, как я хочу.

JS FIDDLE: http://jsfiddle.net/o33gw35w/

CSS:

body {padding: 0; margin: 0; height: 100%; overflow: hidden; font-family: Helvetica;} 

.nameblock { 
height:10%; 
width: 30%; 
position: absolute; 
background-color: yellow; 
} 

.fulldisplay { 
height:90%; 
width: 30%; 
position: absolute; 
overflow: hidden ; 
} 


.spacer1 { 
height:40%; 
position: relative; 
background-color: green; 
} 


.spacer2{ 
height:40%; 
position: relative; 
background-color: purple; 
} 


.spacer3 { 
height:40%; 
position: relative; 
background-color: pink; 
} 


.spacer4{ 
height:40%; 
position: relative; 
background-color: blue; 
} 

HTML:

<div class="nameblock"></div><br/> 

<div class="fulldisplay"> 
    <div class="spacer1"> 
    </div> 
    <div class="spacer2"> 
    </div> 
    <div class="spacer3"></div> 
    <div class="spacer4"></div> 
</div> 

</body> 

Answer 1

Извиняюсь, если я получил вопрос неправильно, как я не совсем уверен, что вы пытаетесь сделать , но если вы хотите иметь способ упорядочивания динамически, вы можете использовать css flexbox для этого. Возможно, вам придется настроить классы на правильную ширину и высоту (например, ширина: 100%; высота: 150px;) и определить контейнер для гибких дисков, как показано ниже.

.fullconversation { 
    padding: 0; 
    margin: 0; 
    list-style: none; 
    width: 30%; 
    display: flex; 
    flex-direction: row; 
    -webkit-flex-flow: row wrap; 
    justify-content: space-around; 
} 

, а затем

.spacer4{ 
width: 100%; 
height: 150px; 
position: relative; 
background-color: blue; 
order: -1; 
} 

Для получения дополнительной информации о Flexbox, пожалуйста, обратитесь к адресам ниже или не стесняйтесь задавать любые вопросы, касающиеся Flexbox или CSS. Надеюсь это поможет.

https://css-tricks.com/almanac/properties/o/order/

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

*********** Обновлено ************

Если изменить высоту spacer1 к 10%, тогда вы увидите синюю рамку, видимую внизу. Обратите внимание, что значение 10% является всего лишь примером, если общий размер высот внутренней дозы не может превышать 100%, синий ящик будет виден.

.spacer1 { 
height:10%; 
position: relative; 
background-color: green; 
} 

Кроме того, если вы хотите увидеть все дивы, независимо от размера, вы можете просто установить переполнение, кроме скрытой.