Родительский контейнер не уважает ребенка Высота

Question

Довольно распространенный вопрос и, как правило, вращается вокруг текущей ситуации, поэтому, прочитав кучу разных решений и пытаясь сместить их, я подумал, что просто задаю старый вопрос я основывался на своей ситуации.

Ситуация

Я построил маленький ползунок страницы с помощью JQuery, и это, кажется, работает, как ожидалось, то я заметил, что высота CSS был еще установлен в значение по умолчанию, я использовал для тестирования. После его удаления я не могу заставить высоту родителя открыть высоту разных детей. Я знаю, что установка позиции разных div на относительную, а не на абсолютную, будет отображать их, но тогда divs больше не расположены правильно (расположены под ними). Другие решения, которые я нашел, вращаются вокруг, не используя разметку, которая даже отдаленно распространена для моих собственных.

Вопрос

Есть ли CSS исправить это, что позволяет мне использовать Bootstrap так, как я его настроить, и анимация JQuery я уже написал? Или их любые предложения (предложения), которые сделают эту работу без слишком большого изменения разметки? Я пробовал пару различных вариантов, и это кажется самым стабильным.

Код

Я добавил его в jsFiddle. Я не мог заставить анимацию работать на скрипке по какой-то причине (работает на моем ноутбуке во всех браузерах), но макет по умолчанию должен быть достаточным, чтобы увидеть, как родитель не уважает дочерние элементы.

<style> 
.container { 
    margin-top: 50px; 
} 
.row { 
    margin-bottom: 20px; 
} 
.windowBox { 
    overflow: hidden; 
} 
.box { 
    background-color: #FFF; 
    position: absolute; 
    width: 100%; 
} 
.page1 { 
    top: 0; 
    left: 0; 
    opacity: 1; 
    z-index: 999; /* set to be over page2 onload */ 
} 
.page2 { 
    top: 0; 
    left: 0; 
    opacity: 0; 
    z-index: 99; /* set to be under page1 onload */ 
} 
</style> 

<div class="container"> 

    <div class="row"> 
     <div class="col-sm-12">Header text should be above either page.</div> 
    </div> 

    <div class="row"> 
     <div class="text-center"> 
      <button type="button" id="showPage1" class="btn btn-danger" disabled>Page 1</button> 
      <button type="button" id="showPage2" class="btn btn-primary">Page 2</button> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-sm-12 windowBox"> 
      <div class="row"> 
       <div class="box page1"> 
        <div class="hidden-xs col-sm-6">...</div> 
        <div class="col-sm-6">...</div> 
       </div> 
       <div class="box page2"> 
        <div class="col-sm-12">...</div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-12">Footer text should be under either page.</div> 
    </div> 
</div> 

Answer 1

DEMO

Добавлен класс Игнорирует Защиту Щитом к разметке. Это единственное изменение, сделанное там.

css Over class является контейнером windowBox.
Мы хотим, чтобы у этого было скрытое переполнение, потому что оно будет содержать все наши страницы бок о бок.

.over { 
    overflow: hidden; 
} 

К сожалению, это фиксированное значение. В основном это ширина вашего окна X страниц. Если вы хотите добавить более одной страницы, вы можете установить это значение в JavaScript.

.windowBox { 
    width: 220vw; 
} 

Затем мы просто устанавливаем контейнер как «вид» фиксированной ширины.
отзывчивая ширина .. поэтому 95 ширина порта просмотра является разумным.

.box { 
    background-color: #FFF; 
    width: 95vw; 
    display: inline-block; 
    float: left; 
} 

И в JavaScript вместо установки left свойства установить margin-left.
Вам нужно сделать это только для первого элемента. Если вы хотите прокрутить страницу до 4, вы можете установить крайние границы первых страниц: -4 * 95vw