Блог

Главная - Вопросы по программированию - Соотношение сторон CSS с увеличивающейся высотой для переполнения содержимого

Соотношение сторон CSS с увеличивающейся высотой для переполнения содержимого

#javascript #css

#javascript #css

Вопрос:

У меня есть окно сохранения соотношения сторон CSS, однако я пытаюсь сделать так, чтобы высота поля увеличивалась, если высота дочернего элемента больше высоты соотношения сторон.

Вот что у меня сейчас есть:

 const box = document.querySelector(".box");
const inner = box.querySelector(".box-inner");
const content = box.querySelector(".box-content");

function updateBox() {
  const innerRect = inner.getBoundingClientRect();
  const contentRect = content.getBoundingClientRect();
  const expandHeight = contentRect.height > innerRect.height;

  inner.style.paddingBottom = expandHeight ? "0" : "100%";
  inner.style.height = expandHeight ? "auto" : "0";
  content.style.position = expandHeight ? "relative" : "absolute";
}

updateBox();
window.addEventListener("resize", updateBox);  
 .box {
  width: 100%;
  max-width: 100px;
  background-color: pink;
  position: relative;
}

.box-inner {
  height: 0;
  padding-bottom: 100%;
}

.box-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}  
 <div class="box">
  <div class="box-inner">
    <div class="box-content">
      <div style="width: 50%; height: 125px; background-color: rgba(255, 0, 0, 0.5)">
        content
      </div>
    </div>
  </div>
</div>

Это работает, однако при изменении размера окна окно мерцает. Есть ли способ решить эту проблему?

Ответ №1:

>= (больше или равно) решает проблему

 contentRect.height >= innerRect.height
  

 const box = document.querySelector(".box");
const inner = box.querySelector(".box-inner");
const content = box.querySelector(".box-content");

function updateBox() {
  const innerRect = inner.getBoundingClientRect();
  const contentRect = content.getBoundingClientRect();
  const expandHeight = contentRect.height >= innerRect.height;

  inner.style.paddingBottom = expandHeight ? "0" : "100%";
  inner.style.height = expandHeight ? "auto" : "0";
  content.style.position = expandHeight ? "relative" : "absolute";
}

updateBox();
window.addEventListener("resize", updateBox);  
 .box {
  width: 100%;
  max-width: 100px;
  background-color: pink;
  position: relative;
}

.box-inner {
  height: 0;
  padding-bottom: 100%;
}

.box-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}  
 <div class="box">
  <div class="box-inner">
    <div class="box-content">
      <div style="width: 50%; height: 125px; background-color: rgba(255, 0, 0, 0.5)">
        content
      </div>
    </div>
  </div>
</div>