Question

我在这里有这种情况。我左右有2个div，现在它的工作方式是，如果左div的高度超过右侧的div的高度，则该函数将使高度相等，并为左div隐藏任何多余的文本，这有效在大多数情况下都很好，但是发生的是，当我更改窗口的高度或在不同的屏幕尺寸上对其进行测试时，它似乎弄乱了左div的高度，并且也没有将其设置回原始值高度。

这是一个link的演示。只需更改不同的屏幕尺寸，然后退出响应模式，您就会看到问题。

var leftContainer = document.getElementById('overflow_text')
var rightContainer = document.getElementById('offset_height')
var readToggle = document.getElementById('toggle_text')
var elem = document.querySelector('.readMore')
var fullText = elem.textContent;
var truncated = false;
var rightOffsetHeight = rightContainer.offsetHeight;
var leftOffsetHeight = leftContainer.offsetHeight;
console.log(leftOffsetHeight)
console.log(rightOffsetHeight)

function mounted() {
  if (leftOffsetHeight > rightOffsetHeight) {
    leftContainer.style.height = rightOffsetHeight + "px"
    readToggle.style.display = 'block'
    readToggle.innerHTML = 'Read More'
    while (leftContainer.scrollHeight > leftContainer.offsetHeight) {
      var wordArray = leftContainer.innerHTML.split(' ');
      wordArray.pop();
      leftContainer.innerHTML = wordArray.join(' ') + '...';
      truncated = true
    }
  } else {
    readToggle.style.display = 'none'
  }
}


function showText() {
  if (truncated) {
    leftContainer.innerHTML = fullText
    leftContainer.style.height = 'auto'
    readToggle.innerHTML = 'Read Less'
    readToggle.style.position = 'relative'
    truncated = false
  } else {
    leftContainer.style.height = rightOffsetHeight + "px"
    while (leftContainer.scrollHeight > leftContainer.offsetHeight) {
      var wordArray = leftContainer.innerHTML.split(' ');
      wordArray.pop();
      leftContainer.innerHTML = wordArray.join(' ') + '...';
      readToggle.innerHTML = 'Read More'
      truncated = true
    }
  }
}

function watchSize() {
  var w = window.outerWidth;
  var h = window.outerHeight;
  console.log(w)
  console.log(h)
}

#toggle_text {
  cursor: pointer;
}

#offset_height {
  font-size: 16px;
}

<body onLoad='mounted()' onresize='watchSize()'>
  <p id="demo"></p>
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <p id='overflow_text' class="readMore">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
          vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum.
          Sed dapibus pulvinar nibh tempor porta.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices.Lorem
          ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum., nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices Sed dapibus pulvinar nibh tempor porta.Lorem ipsum
          dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices.Maecenas nisl est, ultrices.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet,
          nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices. Sed dapibus pulvinar nibh tempor porta.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet,
        </p>
        <span id="toggle_text" onClick='showText()'>Read More</span>
      </div>
      <div class="col-md-6">
        <p id="offset_height">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae sceula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue
          ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. scelerisque enim
          ligula venenatis dolor. Maecenas nisl estDonec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet,
          nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est.
          Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enimt.</p>
      </div>
    </div>
  </div>
</body>

希望有人能够提出一些解决方案。那会帮助我很多。预先谢谢大家。

Answer 1

我使用此代码在调整大小时调整开发人员高度

new ResizeSensor(jQuery('#divId'), function(){ 
console.log('content dimension changed');
});

Answer 2

这是一个JavaScript代码

<script>
function resizeDivs() {
var main = document.getElementById('main').offsetHeight;
var sidebar = document.getElementById('sidebar').offsetHeight;
if (sidebar > main) {
    main = sidebar;
    document.getElementById('main').style.height = document.getElementById
('sidebar').style.height = main + 'px'
} else {
    sidebar = main;
    document.getElementById('sidebar').style.height = document.getElementById
('main').style.height = sidebar + 'px'
}
}
window.onload = resizeDivs;
</script>

您也可以click here for more details

使用resize设置div高度？

2 个答案: