javascript - CSS/JS 仅使其中一个 div 调整大小/滚动到固定页脚

Question

已解决:感谢大家的帮助!

下面的代码片段显示了我的问题在解决之前的样子。无论我做了什么 CSS 编辑，div“单词”都无法滚动。我只想从正文中滚动一个 div“单词”，而不是页眉和页脚之间的整个内容。

Answer 1

这里的问题是“文字”超出了页面底部。要像在 div 标签上那样滚动，您需要给它一个静态高度，否则，div 会自动调整到它的内容的高度，并且表现得像一个普通的 div 标签。

要使其具有响应性，您需要在 javaScript 中使用 screen.height; 来获取总屏幕高度，然后减去页眉和页脚区域的高度，然后设置 div 标签的高度使用结果。为获得最佳结果，请使用类似 window.setInterval(setWordsHeight(), 100); 的方式在一定时间间隔内重新检查屏幕的高度，以便在有人调整窗口大小时不会弄乱它。

var headerFooterHeight = 200; 
window.setInterval( function(){
    document.getElementById("words").style.height = (window.innerHeight - headerFooterHeight)+"px"; 
console.log(document.getElementById("words").style.height);
}, 100);