У меня есть 2 блока внутри контейнера / раздела, но один из двух блоков выталкивается из контейнера, почему?

Question

Я создаю веб-сайт с Wordpress и у меня есть вопрос относительно моей домашней страницы. Он разделен на 4 контейнера, каждый из которых занимает весь экран. В моем 4-м разделе я хочу иметь что-то вроде функции табуляции. Это означает, что в нижней части контейнера container4 есть 4 кнопки, и в зависимости от того, какую из четырех кнопок вы щелкнете, будет загружен другой контент (контент 1, 2, 3 или 4).

Я нашел полезное код на codepen и немного изменил его для своих нужд, но я столкнулся с проблемами, которые не могу решить.

Кнопки обернуты в div 'button-wrap', а затем у меня также есть содержимое div, заключающий в себя 4 div с содержимым, которое должно быть заменено при нажатии на кнопки. Это прекрасно работает с кодом jQuery, который у меня есть, и элементы содержимого также хорошо сочетаются с основным элементом контейнера 4. Однако, хотя я и поместил div для переноса кнопок в div контейнера, он помещается в нижний колонтитул моей домашней страницы. Я попытался добавить встроенный блок, но это ничего не делает. Кажется, кнопки div и content div просто блокируют друг друга. и я не знаю почему!

Вот мой код:

jQuery(function() {
  jQuery('.button').first().addClass('active');
  jQuery('.button').click(function() {
    var jQuerythis = jQuery(this);
    jQuerysiblings = jQuerythis.parent().children(),
      position = jQuerysiblings.index(jQuerythis);
    console.log(position);
    jQuery('.content div').removeClass('active').eq(position).addClass('active');
    jQuerysiblings.removeClass('active');
    jQuerythis.addClass('active');
  })
});

/* Container4 Styling */

.container4 {
  height: 100vh;
  width: 100%;
  margin: 0;
  background-color: #CDE5E1;
  text-align: center;
}


/* Tab HP Styling */

.one {
  height: 100vh;
  width: 100%;
  margin: 0;
  background-color: red;
  display: inline-block;
}

.two {
  height: 100vh;
  width: 100%;
  margin: 0;
  background-color: yellow;
  position: relative;
}

.three {
  height: 100vh;
  width: 100%;
  margin: 0;
  background-color: purple;
}

.four {
  height: 100vh;
  width: 100%;
  margin: 0;
  background-color: green;
}


/* Tab HP BUTTON Styling */

.content {
  height: 100vh;
  width: 100%;
  display: inline-block;
}

.button-wrap {
  bottom: 0;
  width: 100%;
  display: inline-block;
}

a.button {
  color: #fff;
  text-decoration: none;
  padding: 15px 50px;
  display: inline-block;
}

a.active {
  color: black;
}

div[class*="content-"] {
  display: none;
}

div.active {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container4">
  <div class="content">
    <div class="content-1 active one">
      <h1>Content</h1>
    </div>
    <div class="content-2 two"> content 2 </div>
    <div class="content-2 three"> content 3 </div>
    <div class="content-2 four"> content 4 </div>
  </div>
  <div class="button-wrap">
    <a href="#" class="button">  Button 1  </a>
    <a href="#" class="button">    Button 2  </a>
    <a href="#" class="button">  Button 3  </a>
    <a href="#" class="button">  Button 4 </a>
  </div>
</div>

Answer 1

Это происходит потому, что вы выделили 100vh в основной контейнер, т.е. container4. Если вы удалите это будет работать нормально. И если вы хотите, чтобы вкладки отображались в пределах 100vh от элемента content, вы можете попробовать их с абсолютной позицией.

jQuery(function() {
  jQuery('.button').first().addClass('active');
  jQuery('.button').click(function() {
    var jQuerythis = jQuery(this);
    jQuerysiblings = jQuerythis.parent().children(),
      position = jQuerysiblings.index(jQuerythis);
    console.log(position);
    jQuery('.content div').removeClass('active').eq(position).addClass('active');
    jQuerysiblings.removeClass('active');
    jQuerythis.addClass('active');
  })
});

.container4 {
  height: 100vh;
  width: 100%;
  margin: 0;
  background-color: #CDE5E1;
  text-align: center;
  display: flex;
  flex-direction: column;
}


/* Tab HP Styling */

.one {
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: red;
  display: inline-block;
}

.two {
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: yellow;
}

.three {
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: purple;
}

.four {
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: green;
}


/* Tab HP BUTTON Styling */

.content {
  width: 100%;
  flex: 1;
  display: inline-block;
}

.button-wrap {
  width: 100%;
  display: inline-block;
}

a.button {
  color: #fff;
  text-decoration: none;
  padding: 15px 50px;
  display: inline-block;
}

a.active {
  color: black;
}

div[class*="content-"] {
  display: none;
}

div.active {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container4">
  <div class="content">
    <div class="content-1 active one">
      <h1>Content</h1>
    </div>
    <div class="content-2 two"> content 2 </div>
    <div class="content-2 three"> content 3 </div>
    <div class="content-2 four"> content 4 </div>
  </div>
  <div class="button-wrap">
    <a href="#" class="button">  Button 1  </a>
    <a href="#" class="button">    Button 2  </a>
    <a href="#" class="button">  Button 3  </a>
    <a href="#" class="button">  Button 4 </a>
  </div>
</div>