Относительная высота div, равная 100%

#html #css #alignment

#HTML #css #выравнивание

Вопрос:

Как можно установить высоту первого столбца для второго столбца и полосы прокрутки?

 body,
html {
  height: 100%;
  width: 100%
}

body {
  background-color: #F4F5F9;
  font-size: 11px;
}

.menu-right {
  min-height: 100%;
  background: red;
  width: 20px;
  display: block;
  position: relative;
  direction: rtl;
  float: right;
  margin-left: 10px;
}

 <div style="height:100%">
  <div class="menu-right">
    2
  </div>

  <div class="menu-right">
    sdsdsds
    <br /> sdsdsds
    <br /> . . //something such as sdsdsds . .
  </div>
</div>

Результат выглядит следующим образом:

Ответ №1:

Вместо того, чтобы перемещаться вправо, вы можете использовать flexbox с обратной строкой в качестве элемента-оболочки. align-items: stretch Поведение flexbox по умолчанию будет растягиваться и соответствовать высотам — смотрите демонстрацию ниже:

 body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  background-color: #F4F5F9;
  font-size: 11px;
}

.wrapper {
  display: flex;
  flex-direction: row-reverse;
}

.wrapper>div {
  background: red;
  width: 100px;
  direction: rtl;
  margin-left: 10px;
}

 <div class="wrapper">
  <div class="menu-left">
    sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
  </div>
  <div class="menu-right">
    sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
  </div>
</div>

1. На первом изображении есть два столбца, я хочу увеличить высоту первого столбца, который равен «2», до высоты второго столбца. Вы использовали overflow-y: scroll, который прокручивал второй столбец, я хочу установить первый столбец и второй столбец на полосу прокрутки страницы.

Ответ №2:

Вы должны использовать flex box вместо float . добавьте класс во внешний div как .container , установите для свойства display .container значение flex и align-items: stretch

 body,html{height:100%;width:100%}
body{background-color:#F4F5F9;;font-size:11px}


.container {
  display: flex;
  align-items: stretch;
}

.menu-right {
  min-height: 100%;
  background: red;
  width: 20px;
  position: relative;
  direction: rtl;
  margin-left: 10px;
  flex: 0 0 20px;
  
}

 <div class="container" style="height:100%">
    <div class="menu-right">
      2
    </div>

    <div class="menu-right">
      sdsdsds
      <br />
      sdsdsds
      <br />
       .
       .
       //something such as sdsdsds
       .
       .
      </div>
</div>

Ответ №3:

добавьте второй правый стиль div overflow-y:scroll и max-height:100%

 body,html{height:100%;width:100%}
body{background-color:#F4F5F9;;font-size:11px}
.menu-right {
  min-height: 100%;
  background: red;
  width: 20px;
  display: block;
  position: relative;
  direction: rtl;
  float: right;
  margin-left: 10px;
  
}

 <div style="height:100%">
    <div class="menu-right">
      2
    </div>
    <div class="menu-right" style="overflow-y:scroll; max-height:100%">
      sdsdsds
      <br />
      sdsdsds
      <br />
       .
       .
       //something such as sdsdsds
       .
       .
      </div>

</div>

1. Не работает, с несколькими br и sdsdsd красный столбец не будет продолжаться

2. Я на самом деле не понимаю, чего вы хотите, пожалуйста, будьте конкретны. В вашем примере в первом div есть число «2», и столбец все еще продолжается. вы хотите соответствовать контексту, а также когда его больше прокручивать?

3. На первом изображении есть два столбца, я хочу увеличить высоту первого столбца, который равен «2», до высоты второго столбца. Вы использовали overflow-y: scroll, который прокручивал второй столбец, я хочу установить первый столбец и второй столбец на полосу прокрутки страницы.

4. посмотрите сюда