Zigning Ответов: 1

Я пытаюсь сделать так, чтобы высота одного div всегда была шириной другого div

я пытаюсь сделать высоту одного div равной ширине другого div.
Ширина другого div-это процент. Я пытаюсь сделать это с помощью javascript, но это не работает.
Это мой HTML-код.

<body>
      <div id="leftContent">
        <p> left </p>
      </div>
      <div id="rightContent">
        <p> right
        </p>
      </div>
      <script>
      var leftW = document.getElementById("leftContent");
      var rightH = document.getElementById("rightContent");
      leftW.innerHTML="does this work";
      rightH.style.width = 61.8 + "%";
      leftW.style.height=rightH.style.width;
      </script>
</body>


мой CSS выглядит следующим образом.

#rightContent {
  background-color: rgb(186, 212, 255);
  float:left;
  /*width:61.8%;*/
}
#leftContent {
  background-color: rgb(91, 134, 204);
  float:left;
  width:38.2%;
}


Что я уже пробовал:

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

1 Ответов

Рейтинг:
2

Richard Deeming

Что-то вроде этого:

CSS: 

*,
*::before,
*::after {
    box-sizing: border-box;
}

#leftContent,
#rightContent {
    padding: 5px;
    float: left;
}

#leftContent {
    background-color: rgb(91, 134, 204);
    width: 38.2%;
}

#rightContent {
    background-color: rgb(186, 212, 255);
    width: 61.8%;
}
Язык JavaScript: 
var updateSize = function() {
    var left = document.getElementById("leftContent");
    var right = document.getElementById("rightContent");
    left.style.height = right.offsetWidth + "px";
};

updateSize();
window.addEventListener("resize", updateSize);

Демонстрация[^]

Кроме того, если вы просто хотите получить размер элемента в процентах от ширины или высоты видового экрана, используйте единицы измерения видового экрана vw или vh:
Типография размера видового экрана | CSS-трюки[^]