Css как автоматически сделать левую панель такой же высоты, что и правая панель

#html #css

#HTML #css

Вопрос:

Я новичок в css, и у меня такая ситуация: на моем веб-сайте у меня есть фоновое изображение (которое занимает всю страницу) и рамка div (в которую я вставляю содержимое моего веб-сайта); рамка имеет верхний баннер div, и под ним рамка разделена на левую и правую панели. Мой вопрос в том, как сделать левую панель такой же длины (по высоте), что и правая панель, потому что бывает, что правая панель становится длиннее, но левая панель остается фиксированной длины.

 body{
   background-image: url("../img/cd.png");
   background-repeat: no-repeat;
   background-size: 2100px;
   margin: 0;
   padding: 0;
   background-attachment: fixed;
}

#frame{
   background-color: white;
   width: 80%;
   margin: 0 auto;
   border-radius: 0 0 10px 10px;
   overflow: hidden;
}

#left_bar{
    float: left;
    width: 22%;
    background-color: #b3d1ff;
    border-radius: 0 0 0px 10px;
    min-height: 1100px; 
}

#right_bar{
    float: right;
    width: 78%;
}

 <body>           
  <div id="frame">
  <div id="top_banner"></div>
  <div id="left_bar"></div>
  <div id="right_bar"></div>
</body>

1. какую «длину» вы имеете в виду здесь? высота или ширина?

2. в этом фрагменте показан один фрагмент синего цвета. где находится другой фрагмент? я хочу сделать сэндвич.

3. Я имею в виду высоту

Ответ №1:

Оберните ваше left_bar и right_bar в 1 div и сделайте это display: flex

 <div style="display: flex">
  <div id="left_bar"></div>
  <div id="right_bar"></div>
</div>

Ответ №2:

Вы могли бы использовать flexbox здесь. Вот хорошее руководство по Flexbox, если вам интересно.

Например:

 body{
   background-image: url("../img/cd.png");
   background-repeat: no-repeat;
   background-size: 2100px;
   margin: 0;
   padding: 0;
   background-attachment: fixed;
}

#frame{
   background-color: white;
   width: 80%;
   margin: 0 auto;
   border-radius: 0 0 10px 10px;
   overflow: hidden;
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
}

#top_banner {
  flex-basis: 100%;
}

#left_bar{
    width: 22%;
    background-color: #b3d1ff;
    border-radius: 0 0 0px 10px;
    min-height: 1100px; 
}

#right_bar{ 
    background-color: #ff0000;
    width: 78%;
}

 <body>           
  <div id="frame">
  <div id="top_banner"></div>
  <div id="left_bar"></div>
  <div id="right_bar"></div>
</body>

1. Что насчет того, что это не работает? В вашем вопросе и комментариях выше вы заявляете, что хотите, чтобы высоты левой и правой панелей оставались равными, это делает именно это…

2. Извините, я допустил ошибку, когда справлялся с этим, это правильно!