Высота столбца окна при изменении размера

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

Я ввел такой код:

@font-face {
  font-family: "poppins-bold";
  src: url('../css/fonts/Poppins-Bold.ttf');
}

@font-face {
  font-family: "poppins-light";
  src: url('../css/fonts/Poppins-Light.ttf');
}

@font-face {
  font-family: "poppins-medium";
  src: url('../css/fonts/Poppins-Medium.ttf');
}

@font-face {
  font-family: "poppins-regular";
  src: url('../css/fonts/Poppins-Regular.ttf');
}

@font-face {
  font-family: "poppins-semibold";
  src: url('../css/fonts/Poppins-SemiBold.ttf');
}

body {
  margin: 0;
  background-color: #0080b9;
}

.conteneur {
  min-width: 1050px;
}

.light {
  font-family: "poppins-light";
}

.video-cover {
  width: 100%;
  height: 175px;
  background-color: gray;
  margin-top: 10px;
  margin-bottom: 50px;
}

#bloc-gauche {
  background-color: white;
  width: 25%;
  float: left;
  /*height: 900px;*/
  height: 100vh;
  color: #0080b9;
  font-family: "poppins-semibold";
  overflow: scroll;
  /*
        padding-left:20px;
        padding-right:20px;
        padding-top:20px;
        */
}

.wrapper-bloc-gauche {
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 30px;
}

#intro {
  width: 185px;
  margin-bottom: 50px;
}

#content-bloc-droite {
  padding-top: 25px;
}

#bloc-droite {
  background-color: #0080b9;
  width: 75%;
  float: right;
  font-family: "poppins-semibold";
  color: white;
  background-repeat: repeat-x;
}

.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

#description {
  font-size: 15px;
  text-align: center;
  width: 45%;
  margin-top: 25px;
}

.video-player-container {
  /*width:40%;*/
  display: block;
  margin-right: auto;
  margin-left: auto;
  margin-top: 50px;
  margin-bottom: 40px;
}

.video-player {
  width: 100%;
  border: 5px solid #ECECEC;
  box-sizing: border-box;
}

.footer-bloc-droite {
  text-align: center;
  padding-left: 30px;
  padding-right: 30px;
  overflow: hidden;
}

#logo-joon {
  float: left;
  width: 200px;
}

#btn-xp {
  display: inline-block;
  margin: 0 auto;
  background-color: white;
  padding-right: 15px;
  padding-left: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #0080b9;
}

#joon-p {
  float: right;
  width: 200px;
}

#joon-p-img {
  /*transform: rotate(-20deg);
        padding-bottom: 0px;
        -webkit-transform-origin-x: -55px;
        overflow: hidden;
        */
  -webkit-transform-origin-x: -55px;
  width: 95%;
}

#left-block {
  float: left;
}

#right-block {
  float: right;
}
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity = "sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin = "anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity = "sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin = "anonymous"></script>

<div class='conteneur'>
  <div id='bloc-gauche'>

    <div class='wrapper-bloc-gauche'>
      <div class='row'>
        <div id='intro'>
          Vivez l'intégralité d'un voyage JOON avec Maxime Gasteuil
        </div>
      </div>
      <div id='playlist'>
        <div class='video-preview'>
          <div class='video-title'>Ep 1 <span class='light'>Lorem Ipsum dolores sit amet</span></div>
          <div class='video-cover'></div>
        </div>
      </div>
      <div id='playlist'>
        <div class='video-preview'>
          <div class='video-title'>Ep 2 <span class='light'>Lorem Ipsum dolores sit amet</span></div>
          <div class='video-cover'></div>
        </div>
      </div>
      <div id='playlist'>
        <div class='video-preview'>
          <div class='video-title'>Ep 3 <span class='light'>Lorem Ipsum dolores sit amet</span></div>
          <div class='video-cover'></div>
        </div>
      </div>
      <div id='playlist'>
        <div class='video-preview'>
          <div class='video-title'>Ep 4 <span class='light'>Lorem Ipsum dolores sit amet</span></div>
          <div class='video-cover'></div>
        </div>
      </div>
    </div>

  </div>
  <div id='bloc-droite'>
    <div id='content-bloc-droite'>
      <div class='row'>
        <img src='http://94.23.46.98/img/logo-qpV2.png' style='width:25%;' class='center-block'>
      </div>
      <div class='row'>
        <div id='description' style='text-align:center;' class='center-block'>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis veritatis, fugit quia repudiandae est dignissimos modi expedita ullam totam, aliquid odit voluptas omnis dolores nemo nam
        </div>
      </div>
      <div class='row'>
        <div class='video-player-container center-bloc'>
          <video controls class='video-player center-block' style='min-width:475px;max-width:40%;'>
                                <source src='http://web1.fr-hmd.com/adpulse/videos-adpulse/joon-1.mp4' type = "video/mp4">
                            </video>
        </div>
      </div>
      <div class='footer-bloc-droite'>
        <div class='row'>
          <div id='logo-joon'>
            <img src='http://94.23.46.98/img/logo-joon.png' width='150px;'>
          </div>

          <div id='btn-xp'>
            Démarrer l'expérience de voyage
          </div>

          <div id='joon-p'>
            <img src='http://94.23.46.98/img/logo-pV2.png' width='240px;' id='joon-p-img'>
          </div>
          <div style='clear:both'></div>
        </div>
      </div>
    </div>
  </div>
  <div style='clear:both'></div>
</div>

У меня есть еще одна небольшая проблема: я хотел немного поднять самолет. Я попытался использовать position: absolute, но все остальные элементы не центрированы.

Пожалуйста, ограничьте свой код тем, что действительно необходимо. mcve для получения дополнительной информации об этом

lumio 08.06.2018 16:17

разве они уже не равны по высоте?

Zohir Salak 08.06.2018 16:28

@ZohirSalakCeNa им нет равных попробуйте увеличить или уменьшить

LuR 11.06.2018 10:33
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
3
49
1

Ответы 1

Вы предоставили так много кода, который бесполезен, и, как вы не можете, никто не позаботился об исправлении вашей проблемы, в любом случае все, что я собираюсь сказать, это то, что я пытался добавить определенные height:100% и height:100vh в некоторые элементы wrapper, и теперь он должен работать.

@font-face {
  font-family: "poppins-bold";
  src: url('../css/fonts/Poppins-Bold.ttf');
}

@font-face {
  font-family: "poppins-light";
  src: url('../css/fonts/Poppins-Light.ttf');
}

@font-face {
  font-family: "poppins-medium";
  src: url('../css/fonts/Poppins-Medium.ttf');
}

@font-face {
  font-family: "poppins-regular";
  src: url('../css/fonts/Poppins-Regular.ttf');
}

@font-face {
  font-family: "poppins-semibold";
  src: url('../css/fonts/Poppins-SemiBold.ttf');
}

body {
  margin: 0;
  background-color: #0080b9;
}

.conteneur {
  min-width: 1050px;
  height: 100vh;
}

.light {
  font-family: "poppins-light";
}

.video-cover {
  width: 100%;
  height: 175px;
  background-color: gray;
  margin-top: 10px;
  margin-bottom: 50px;
}

#bloc-gauche {
  background-color: white;
  width: 25%;
  float: left;
  /* height: 900px; */
  height: 100vh;
  color: #0080b9;
  font-family: "poppins-semibold";
  overflow: scroll;
  /*
        padding-left:20px;
        padding-right:20px;
        padding-top:20px;
        */
}

.wrapper-bloc-gauche {
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 30px;
  max-height: 100%;
}

#intro {
  width: 185px;
  margin-bottom: 50px;
}

#content-bloc-droite {
  padding-top: 25px;
  max-height: 100%;
  overflow: auto;
}

#bloc-droite {
  background-color: #0080b9;
  width: 75%;
  float: right;
  font-family: "poppins-semibold";
  color: white;
  background-repeat: repeat-x;
  height: 100%;
}

.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

#description {
  font-size: 15px;
  text-align: center;
  width: 45%;
  margin-top: 25px;
}

.video-player-container {
  /*width:40%;*/
  display: block;
  margin-right: auto;
  margin-left: auto;
  margin-top: 50px;
  margin-bottom: 40px;
}

.video-player {
  width: 100%;
  border: 5px solid #ECECEC;
  box-sizing: border-box;
}

.footer-bloc-droite {
  text-align: center;
  padding-left: 30px;
  padding-right: 30px;
  overflow: hidden;
}

#logo-joon {
  float: left;
  width: 200px;
}

#btn-xp {
  display: inline-block;
  margin: 0 auto;
  background-color: white;
  padding-right: 15px;
  padding-left: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #0080b9;
}

#joon-p {
  float: right;
  width: 200px;
}

#joon-p-img {
  /*transform: rotate(-20deg);
        padding-bottom: 0px;
        -webkit-transform-origin-x: -55px;
        overflow: hidden;
        */
  -webkit-transform-origin-x: -55px;
  width: 95%;
}

#left-block {
  float: left;
}

#right-block {
  float: right;
}
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">

<div class='conteneur'>
  <div id='bloc-gauche'>

    <div class='wrapper-bloc-gauche'>
      <div class='row'>
        <div id='intro'>
          Vivez l'intégralité d'un voyage JOON avec Maxime Gasteuil
        </div>
      </div>
      <div id='playlist'>
        <div class='video-preview'>
          <div class='video-title'>Ep 1 <span class='light'>Lorem Ipsum dolores sit amet</span></div>
          <div class='video-cover'></div>
        </div>
      </div>
      <div id='playlist'>
        <div class='video-preview'>
          <div class='video-title'>Ep 2 <span class='light'>Lorem Ipsum dolores sit amet</span></div>
          <div class='video-cover'></div>
        </div>
      </div>
      <div id='playlist'>
        <div class='video-preview'>
          <div class='video-title'>Ep 3 <span class='light'>Lorem Ipsum dolores sit amet</span></div>
          <div class='video-cover'></div>
        </div>
      </div>
      <div id='playlist'>
        <div class='video-preview'>
          <div class='video-title'>Ep 4 <span class='light'>Lorem Ipsum dolores sit amet</span></div>
          <div class='video-cover'></div>
        </div>
      </div>
    </div>

  </div>
  <div id='bloc-droite'>
    <div id='content-bloc-droite'>
      <div class='row'>
        <img src='http://94.23.46.98/img/logo-qpV2.png' style='width:25%;' class='center-block'>
      </div>
      <div class='row'>
        <div id='description' style='text-align:center;' class='center-block'>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis veritatis, fugit quia repudiandae est dignissimos modi expedita ullam totam, aliquid odit voluptas omnis dolores nemo nam
        </div>
      </div>
      <div class='row'>
        <div class='video-player-container center-bloc'>
          <video controls class='video-player center-block' style='min-width:475px;max-width:40%;'>
                                <source src='http://web1.fr-hmd.com/adpulse/videos-adpulse/joon-1.mp4' type = "video/mp4">
                            </video>
        </div>
      </div>
      <div class='footer-bloc-droite'>
        <div class='row'>
          <div id='logo-joon'>
            <img src='http://94.23.46.98/img/logo-joon.png' width='150px;'>
          </div>

          <div id='btn-xp'>
            Démarrer l'expérience de voyage
          </div>

          <div id='joon-p'>
            <img src='http://94.23.46.98/img/logo-pV2.png' width='240px;' id='joon-p-img'>
          </div>
          <div style='clear:both'></div>
        </div>
      </div>
    </div>
  </div>
  <div style='clear:both'></div>
</div>

Другие вопросы по теме