CSS установить высоту до 50% от высоты братьев и сестер - PullRequest
Новая
       4

CSS установить высоту до 50% от высоты братьев и сестер

0 голосов
/ 06 февраля 2020

Мне нужно иметь возможность установить высоту элемента в CSS или LESS динамически.

Я хочу, чтобы sibling-2 был на 50% высоты sibling-1. 

<div class="sibling-1 dynamic-height"></div>
<span class="sibling-2"></span>

Ответы [ 4 ]

1 голос
/ 06 февраля 2020

CSS Сетка может сделать это 

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows:1fr; /* This */
  border: 1px solid;
  margin:5px;
}

.sibling-1 {
  grid-row:span 2; /* and this will do the magic */
  background: blue;
  color:#fff;
}

.sibling-2 {
  background:red;
}
<div class="container">
  <div class="sibling-1 dynamic-height"> some text here</div>
  <span class="sibling-2"></span>
</div>

<div class="container">
  <div class="sibling-1 dynamic-height"> some <br>text <br>here</div>
  <span class="sibling-2"></span>
</div>

<div class="container">
  <div class="sibling-1 dynamic-height" style="height:200px;"> some <br>text <br>here</div>
  <span class="sibling-2"></span>
</div>
0 голосов
/ 06 февраля 2020

Вам необходимо установить родительскую высоту: 

.parent {
    display: flex;
    height: 100px;
}
.sibling-2 {
    display: block;
    height: 100%;
    width: 20px;
    background-color: red;
}
.sibling-1 {
    height: 50%;
    width: 20px;
    background-color: blue;
 }
<html>
<body>
    <div class="parent">
        <div class="sibling-1 dynamic-height"></div>
        <span class="sibling-2"></span>
    </div>
</body>
</html>
0 голосов
/ 06 февраля 2020

Это невозможно с собственным flexbox, , однако , используя те же приемы, что и этот Вопросы и ответы - Один элемент Flex устанавливает ограничение по высоте для братьев и сестер это может быть достиг. 

.parent {
  display: flex;
  position: relative;
  border: 1px solid grey;
}

.sibling-1 {
  flex: 0 0 50%;
  height: 150px;
  background: lightblue;
  resize: vertical;
  overflow: auto;
}

.sibling-2 {
  position: absolute;
  left: 50%;
  height: 50%;
  background: lightgreen;
  width: 50%;
}
<div class="parent">
  <div class="sibling-1 dynamic-height"></div>
  <span class="sibling-2"></span>
</div>

Примечание : это немного обманывает, поскольку высота sibling-2 не равна на самом деле 50% от sibling-1, а точнее 50% от высоты родителя , высота которого определяется sibling-1. Это работает, но я бы посоветовал его не масштабировать и не рекомендовать для производственных целей.

0 голосов
/ 06 февраля 2020

Просто отредактируйте свой sibling-2 класс как 

.sibling-2{
    height: 50%;
}

Это будет работать, только если у sibling-1 есть контент или фиксированная высота. Если нет, вы должны установить его: 

.sibling-1{
    height: 100vh;
}
.sibling-2{
    height: 50%;
}
...