css - HTML & CSS 如何防止 div 延伸到更大的窗口高度？

Question

如何防止包含一长串项目的 div 扩展页面高度。我希望 div 占据整个屏幕，但不要更多，这样它就不会将页脚向下推。

Answer 1

为容器设置一个特定的高度div，并设置overflow-y为 auto 以便仅当 div 的内容大于container. 像这样：

.container { 
    height: 500px; 
    overflow-y:auto;
}

Answer 2

没有js是不可能的，因为你的页面可以用不同的分辨率查看。不同的分辨率意味着不同的高度。事实上，当用户调整浏览器窗口大小时，您可能也想要这种行为，对吗？所以首先，找出浏览器的高度，从中减去页脚的高度，并将这个高度设置为你的容器，我相信你想让它在 yaxis 上滚动。这将解决问题。所有这些任务都非常简单，你可以通过谷歌搜索来完成。

Answer 3

为此使用 JavaScript/jQuery：

jQuery解决方案：

<div id="content-div">some content here</div>

$(document).ready(function() {
  var height = $(document).height();
  height = height - (your footer height);
  $("#content-div").css({ 'max-height' : height.toString() });
});

标准 JavaScript 解决方案：

<div id="content-div">some content here</div>

 function myfunction () {
       document.getElementById('content-div').style.height = getDocHeight() + 'px';
 }

window.onload = myfunction();

document.getElementById('content-div').style.height = getDocHeight() + 'px';

function getDocHeight() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
}

另外，将 CSS 更改为：

#content-div { background-color:#1d1d1d; color:#eee; overflow-y: scroll; }